:root {
    /* Softer, Matte Gold Gradients for better readability */
    --gold-gradient: linear-gradient(135deg, #c5a059, #e6d28c, #c5a059);
    --gold-text-gradient: linear-gradient(to bottom, #aa853c, #8a6e1e);
    /* Darker split for text */
    --bg-pattern: #f4f4f4;
    --glass-bg: rgba(255, 255, 255, 0.92);
    /* More opaque for better text contrast */
    --text-dark: #1a252f;
    /* Darker grey/black */
    --font-amiri: 'Amiri', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Smooth fonts */
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-amiri);
    /* Pattern Background to make glass visible */
    background-color: #fcfbf8;
    background-image:
        radial-gradient(#d4af37 0.5px, transparent 0.5px),
        radial-gradient(#d4af37 0.5px, #fcfbf8 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;

    color: var(--text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    direction: rtl;
}

/* Main Card */
.invitation-card {
    width: 100%;
    max-width: 600px;
    padding: 50px 30px;

    /* Shape */
    border-radius: 12px;

    /* FROSTED GLASS - Increased opacity for readability */
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Soft Matte Gold Border */
    background-clip: padding-box;
    /* stops bg from leaking into border */
    border: 4px solid transparent;
    /* space for the gradient border */
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

    /* Gradient Border & Background Art Trick */
    /* Layer 1: White overlay (glass) - padding-box - Reduced opacity for visibility */
    /* Layer 2: Seamless Pattern - padding-box - Increased size slightly */
    /* Layer 3: Gold Gradient - border-box (visible only in border area) */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('bg.png'),
        var(--gold-gradient);

    background-origin: padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, border-box;
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: cover, 350px auto, cover;
    /* Larger pattern for better visibility */

    /* Double border illusion using box-shadow inset if needed, but gradient border is cleaner */
}

/* Adding a secondary inner golden line for "Frame" look */
.invitation-card::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid #c5a059;
    border-radius: 8px;
    opacity: 0.4;
    pointer-events: none;
}

/* Typography & Shiny Text */
h1,
h2,
h3 {
    text-align: center;
    font-weight: 700;
}

.basmala {
    font-size: 2.2rem;
    margin-bottom: 25px;
    /* Gradient Text */
    color: #8a6e1e;
    /* Solid color fallback */
    background: var(--gold-text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-title {
    font-size: 1.3rem;
    color: #997b36;
    /* Solid gold for readability */
    margin-bottom: 20px;
}

.verse-section {
    text-align: center;
    margin-bottom: 30px;
}

.quran-verse {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #333;
    /* Darker for readability */
    font-weight: 500;
    font-style: italic;
    margin-bottom: 8px;
}

.sadaq {
    font-size: 0.95rem;
    color: #666;
}

.families-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
    text-align: center;
}

.family-group h3 {
    font-size: 1.4rem;
    color: #7b621b;
    /* Darker gold/brown */
    margin: 5px 0;
}

.invitation-text {
    text-align: center;
    font-size: 1.25rem;
    color: #222;
    margin: 30px 0;
    font-weight: 500;
}

/* Couple Names with Shine */
.couple-section {
    margin: 40px 0;
    text-align: center;
}

.couple-names {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.bride-name,
.groom-name {
    font-size: 2rem;
    color: #8a6e1e;
    /* Solid fallback */
    background: var(--gold-text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    /* Thicker font for readability */
    padding: 0 5px;
    /* prevent clip cut-off */
}

.relation {
    color: #777;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 5px;
}

.ampersand {
    font-size: 2.5rem;
    color: #c5a059;
    line-height: 1;
}

/* Details */
.details-section {
    text-align: center;
    margin-top: 30px;
    color: #4a4a4a;
}

.location {
    font-weight: bold;
    color: #8a6e1e;
    margin-top: 10px;
}

/* Footer & Buttons */
.footer {
    text-align: center;
    margin-top: 40px;
}

.final-wishes {
    font-size: 1.2rem;
    margin-bottom: 25px;
    color: #7b621b;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: inherit;
    border: none;
}

/* Shiny Gold Button */
.btn-gold {
    background: #c5a059;
    /* Solid matte gold */
    background: linear-gradient(135deg, #c5a059, #b08d3d);
    color: #fff;
    /* White text on gold */
    box-shadow: 0 4px 10px rgba(197, 160, 89, 0.3);
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(197, 160, 89, 0.4);
}

/* Outline Button with Gradient Border */
.btn-gold-outline {
    background: transparent;
    color: #8a6e1e;
    position: relative;
    z-index: 1;
    /* Simulate gradient border via box-shadow or background trick */
    border: 2px solid #c5a059;
}

.btn-gold-outline:hover {
    background: #c5a059;
    color: #fff;
    transform: translateY(-2px);
}

/* Animations */
.invitation-card {
    animation: fadeIn 1.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .invitation-card {
        padding: 30px 20px;
        border-width: 3px;
        /* Smaller border on mobile */
    }

    /* Families grid stays side-by-side on mobile, just reduced gap */
    .families-grid {
        gap: 10px;
    }

    .family-group h3 {
        font-size: 1.2rem;
        /* Reduce font size slightly to fit */
    }

    /* Fixed Mobile Layout for Couple Names */
    .couple-names {
        flex-direction: column;
        gap: 15px;
    }

    .ampersand {
        transform: rotate(90deg);
        /* Optional artistic touch or just keep vertical spacing */
        margin: 5px 0;
        font-size: 2rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}