/* === GLOBAL RESET / BASE ==== */
* {
    box-sizing: border-box;
}



/* RTL */
.dedicate-page .rtl .card {
    direction: rtl;
    text-align: right;
}



@font-face {
    font-family: 'Amiri';
    src: url('/assets/fonts/Amiri-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Alexandria';
    src: url('/assets/fonts/Alexandria-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Playpen Sans Arabic';
    src: url('/assets/fonts/PlaypenSansArabic-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Estedad';
    src: url('/assets/fonts/Estedad-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Dancing Script';
    src: url('/assets/fonts/DancingScript-Regular.ttf') format('truetype');
}


@font-face {
    font-family: 'Merriweather';
    src: url('/assets/fonts/Merriweather_24pt-Regular.ttf') format('truetype');
}


@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
}


@font-face {
    font-family: 'Lobster';
    src: url('/assets/fonts/Lobster-Regular.ttf') format('truetype');
}


@font-face {
    font-family: 'Pacifico';
    src: url('/assets/fonts/Pacifico-Regular.ttf') format('truetype');
}


#font option[value="Playpen Sans Arabic"]{
    font-family:'Playpen Sans Arabic';
}


#font option[value="Amiri"]{
    font-family:'Amiri';
}

#font option[value="Alexandria"]{
    font-family:'Alexandria';
}

#font option[value="Estedad"]{
    font-family:'Estedad';
}

#font option[value="Tajawal"]{
    font-family:'Tajawal';
}

#font option[value="Playfair Display"]{
    font-family:'Playfair Display';
}


#font option[value="Pacifico"]{
    font-family:'Pacifico';
}

#font option[value="Lobster"]{
    font-family:'Lobster';
}

#font option[value="Merriweather"]{
    font-family:'Merriweather';
}


#font option[value="Dancing Script"]{
    font-family:'Dancing Script';
}

/* === DESKTOP - CREATION PAGE ==== */
.dedicate-page {
    margin: 0;
    padding: 0;
    background: #f2f2f2;
    height: 100dvh;
    overflow: visible;
}


/* WRAPPER */
.dedicate-page .dedicate-wrap {
    display: flex;
    height: 100dvh;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    flex-wrap: nowrap;
}

/* EN LEFT PANEL (SCROLL ONLY) */
.dedicate-page .form-panel {
    width: 45%;
    height: 100dvh;
    height: 100vh;

    background: #fff;
    border-right: 1px solid #ddd;

        overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;

    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 24px;
    box-sizing: border-box;
}

/* INNER */
.dedicate-page .form-inner {
    width: 100%;
    max-width: 480px;
    padding-bottom: 120px;
}

/* EN RIGHT PANEL (LOCKED PREVIEW) */
.dedicate-page .preview-panel {
    width: 55%;
    height: 100vh;
    background: #e9e9e9;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 0;
}

 /*LABEL */
.dedicate-page .preview-panel::before {
    content: "Live Preview";
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 12px;
    opacity: 0.5;
}

/* CARD */
.dedicate-page .card {
    width: min(420px, 90%);
    aspect-ratio: 4 / 5;
    position:relative;
    margin:auto;
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    transition:background-image .15s linear;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;
    margin: 0;
}

/* TEXT */
.dedicate-page .salutation {
    font-size: clamp(16px, 2vw, 24px);
    margin-bottom: 12px;
}

.dedicate-page .message {
    font-size: clamp(16px, 1.8vw, 24px);
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

.dedicate-page .name {
    margin-top: 18px;
    font-weight: bold;
    font-size: clamp(16px, 1.6vw, 24px);
}

/* TEMPLATE GRID */
.dedicate-page .template-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

/* Divider */
.dedicate-page .tpl-divider {
    border: none;
    height: 1px;
    background: #e6e6e6;
    margin: 14px 0;
}

/* Label */
.dedicate-page .tpl-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin: 8px 0 6px;
}

/* Navigation wrapper */
.dedicate-page .tpl-nav {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 12px;
}

/* Button */
.dedicate-page .tpl-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    border-radius: 10px;

    background: #039bbc;
    color: #fff;

    font-size: 13px;
    font-weight: 600;

    border: none;
    cursor: pointer;

    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Hover */
.dedicate-page .tpl-next-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Active press */
.dedicate-page .tpl-next-btn:active {
    transform: translateY(0px);
}

/* Icon alignment */
.dedicate-page .tpl-next-btn i {
    font-size: 12px;
}


.dedicate-page .tpl img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;

    border-radius: 6px;
    border: 2px solid transparent;
    display: block;
}

.dedicate-page .tpl input {
    display: none;
}

.dedicate-page .tpl input:checked + img {
    border: 2px solid #000;
}

/* FIELD ROW */
.dedicate-page .field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin: 12px 0;
}

.dedicate-page .field-row label {
    font-size: 14px;
    white-space: nowrap;
}

.dedicate-page .field-row select {
   max-width:50%;
}

#fontPreview{
    margin:10px 0 15px;
    font-size:22px;
    text-align:center;
    white-space: nowrap;
border: 1px solid gray;
border-radius: 8px;
padding: 5px;
}



/* INPUTS */
.dedicate-page input,
.dedicate-page textarea,
.dedicate-page select {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    font-size: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-family: inherit;
}

.dedicate-page textarea {
  field-sizing: content;
  min-height: 4lh;
}

/* BUTTON ROW */
.dedicate-page .button-row {
    margin-top: 24px;
    margin-bottom: 24px;

    padding-bottom: 20px;

    display: flex;
    gap: 12px;
}

.dedicate-page .button-row button {
    flex: 1;

    padding: 14px;
    font-weight: 700;
    font-size: 14px;

    border-radius: 8px;

    background: #039bbc;
    color: #fff;
    border: none;

    cursor: pointer;
}

/* BUTTON RESET (SAFE VERSION) */
.dedicate-page button {
    border: none;
    font: inherit;
    cursor: pointer;
}

.g-recaptcha{
    transform:scale(.9);
    transform-origin:left top;
     max-width: 100%;
    overflow: hidden;
}


                    /* ===== MOBILE + TABLET PORTRAIT ===== */
                    @media (max-width: 768px) {
                    
                        .dedicate-page {
                            height: auto;
                            overflow: visible;
                        }
                    
                        .dedicate-page .dedicate-wrap {
                            flex-direction: column;
                            height: auto;
                            overflow: visible;
                        }
                                            
                        .dedicate-page .form-inner {
                        padding-bottom: 10px;
                        }
                        
                        .dedicate-page .button-row {
                        margin-bottom: 10px;
                        padding-bottom: 0;
                        }

                        .dedicate-page .form-panel {
                            width: 100%;
                            height: auto;
                            overflow: visible;
                            border-right: none;
                        }
                    
                        .dedicate-page .preview-panel {
                            width: 100%;
                            height: auto;
                            min-height: 0;
                    
                            display: flex;
                            justify-content: center;
                            align-items: center;
                    
                            padding: 10px 0;
                    
                            position: relative;
                            overflow: visible;
                        }
                    
                        .dedicate-page .card {
                            width: min(420px, 92vw);
                    
                            position: relative;
                            top: auto;
                            left: auto;
                    
                            margin: 0;
                            transform: none;
                        }
                    
                        .dedicate-page .template-grid {
                            grid-template-columns: repeat(2, 1fr);
                        }
                    }




@media(max-width:480px){
.g-recaptcha{
    transform:scale(.82);
    transform-origin: right top;
    }

    html[dir="ltr"] .g-recaptcha {
        transform-origin: left top;
    }

}



/* === Font Color Picker */
.font-color-picker{
    display:flex;
    gap:8px;
    margin-top:8px;
    align-items:center;
}

.color-swatch{
    width:26px;
    height:26px;
    border-radius:4px;
    cursor:pointer;
    transition:.15s;
}

.color-swatch.active{
    transform:scale(1.15);
    box-shadow:0 0 0 3px #333;
}



/* =========================================================
   DEDICATE CARD VIEW (ISOLATED SCOPE ONLY)
   DOES NOT AFFECT dedicate-page OR OTHER SYSTEMS
========================================================= */

/* ROOT WRAPPER */
.dedicate-card-view {
    display: flex;
    gap: 24px;
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* RTL SUPPORT */
.dedicate-card-view.rtl {
    direction: rtl;
    text-align: right;
}

/* =========================================================
   RECEIVER INTRO (ONLY IN VIEW MODE)
========================================================= */

.dedicate-card-view .receiver-intro {
    width: 100%;
    margin-bottom: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.dedicate-card-view .receiver-intro h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.dedicate-card-view .receiver-intro p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* =========================================================
   CARD (MAIN VISUAL)
========================================================= */

.dedicate-card-view .card {
    flex: 1;
    min-height: 520px;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 14px 34px rgba(0,0,0,0.14);
    overflow: hidden;
}

/* soft readability overlay */
.dedicate-card-view .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.08);
}

.dedicate-card-view .card > * {
    position: relative;
}

/* CARD TEXT */
.dedicate-card-view .salutation {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.dedicate-card-view .message {
    font-size: 16px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.dedicate-card-view .name {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 600;
}

/* =========================================================
   SIDEBAR (SENDER ONLY)
========================================================= */

.dedicate-card-view .card-sidebar {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* SECTION BLOCKS */
.dedicate-card-view .action-block {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.dedicate-card-view .action-block h3 {
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: 0.2px;
    font-weight: 700;
    color: #333;
}

/* =========================================================
   EMAIL BLOCK (HIGH PRIORITY ACTION)
========================================================= */

.dedicate-card-view .email-block input {
    width: 100%;
    padding: 12px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    background: #fff;
}

.dedicate-card-view .email-block input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}

.dedicate-card-view .email-block button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #4f46e5;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.dedicate-card-view .email-block button:hover {
    background: #4338ca;
}

.dedicate-card-view .email-block button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* =========================================================
   SHARE BLOCK (SECONDARY ACTIONS)
========================================================= */

.dedicate-card-view .share-block button,
.dedicate-card-view .share-block a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    color: #111;
    transition: 0.2s ease;
}

.dedicate-card-view .share-block button:hover,
.dedicate-card-view .share-block a:hover {
    background: #f3f4f6;
}

/* =========================================================
   RECEIVER ACTIONS (VIEW MODE ONLY)
========================================================= */

.dedicate-card-view .receiver-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dedicate-card-view .receiver-actions button,
.dedicate-card-view .receiver-actions a {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    color: #111;
    transition: 0.2s ease;
}

.dedicate-card-view .receiver-actions button:hover,
.dedicate-card-view .receiver-actions a:hover {
    background: #f3f4f6;
}

/* =========================================================
   TOAST (GLOBAL BUT SAFE SCOPE)
========================================================= */

.dedicate-card-view #toast {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    display: none;
    z-index: 9999;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    max-width: 90%;
}

/* =========================================================
   DESKTOP VIEWPORT-CONTAINED LAYOUT (NO SCROLL)
========================================================= */
@media (min-width: 901px) {

    .dedicate-card-view {
        height: calc(100vh - 100px); /* header compensation */
        overflow: hidden;
        align-items: center;
    }

    /* CARD = FIXED RATIO, FITS INTO VIEWPORT */
    .dedicate-card-view .card {
        flex: 0 0 auto;

        /* enforce your design ratio */
        aspect-ratio: 1080 / 1350;

        /* critical: fit inside viewport */
        height: calc(100vh - 140px); /* buffer for padding */

        max-height: 860px; /* prevents overscaling on large screens */

        width: auto;

        max-width: calc((100vh - 140px) * (1080 / 1350));

        padding: clamp(24px, 2.2vw, 42px);

        position: relative;
        top: 0;
    }

    /* SIDEBAR becomes viewport-aligned tool panel */
    .dedicate-card-view .card-sidebar {
        height: calc(100vh - 140px);
        overflow: hidden;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* MAKE ACTION BLOCKS SCROLL INSIDE SIDEBAR IF NEEDED */
    .dedicate-card-view .card-sidebar {
        overflow-y: auto;
        padding-right: 6px;
    }

    /* optional: cleaner spacing balance */
    .dedicate-card-view {
        justify-content: center;
    }
}


/* =========================================================
   TABLET / MOBILE BREAKPOINT
========================================================= */

@media (max-width: 900px) {

    .dedicate-card-view {
        flex-direction: column;
        padding: 16px;
    }

    .dedicate-card-view .card {
        min-height: 420px;
        padding: 26px;
    }

    .dedicate-card-view .card-sidebar {
        width: 100%;
    }

    .dedicate-card-view .receiver-actions {
        flex-direction: column;
    }

    .dedicate-card-view .receiver-actions button,
    .dedicate-card-view .receiver-actions a {
        width: 100%;
        text-align: center;
    }

    .dedicate-card-view .action-block {
        padding: 14px;
    }
}

/* =========================================================
   SMALL MOBILE OPTIMIZATION
========================================================= */

@media (max-width: 480px) {

    .dedicate-card-view .card {
        padding: 20px;
        min-height: 380px;
        border-radius: 14px;
    }

    .dedicate-card-view .salutation {
        font-size: 16px;
    }

    .dedicate-card-view .message {
        font-size: 14px;
    }

    .dedicate-card-view .name {
        font-size: 14px;
    }

    .dedicate-card-view #toast {
        font-size: 13px;
        padding: 10px 14px;
    }
}