/* PHASE D5: Extracted from certificate-templates-admin.js renderStyles().
   Scope is retained intentionally to avoid behavior changes before D6. */
.cert-section-spacer {
    height: 18px;
}


            @font-face {
                font-family: 'Cairo';
                src: url('/assets/fonts/certificates/Cairo.ttf?v=2') format('truetype');
                font-weight: 100 1000;
                font-style: normal;
                font-display: swap;
            }



            .cert-page {
                direction: rtl;
                font-family: Cairo, system-ui, sans-serif;
                display: grid;
                gap: 18px;
                color: #173d2d;
            }


            .cert-hero {
                background: radial-gradient(circle at top right, rgba(218,170,78,.24), transparent 34%),
                            linear-gradient(135deg, #123829, #1f503b);
                color: #fff;
                border-radius: 28px;
                padding: 28px;
                display: flex;
                justify-content: space-between;
                gap: 18px;
                align-items: center;
                box-shadow: 0 20px 45px rgba(18,56,41,.22);
            }



            .cert-hero.simple {
                min-height: auto;
                padding: 26px 30px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }


            .cert-hero.simple h1 {
                margin: 0;
                font-size: 34px;
                font-weight: 950;
            }


            .cert-hero h1 {
                margin: 0;
                font-size: 32px;
                font-weight: 900;
            }


            .cert-hero p {
                margin: 8px 0 0;
                color: rgba(255,255,255,.82);
                font-weight: 800;
            }


            .cert-kicker {
                color: #e8c06b;
                font-weight: 900;
                letter-spacing: .08em;
                font-size: 13px;
                margin-bottom: 8px;
            }



            .cert-grid-editor {
                grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
            }


            .cert-main-editor {
                display: grid;
                gap: 0;
            }


            .cert-side-panel {
                display: grid;
                align-content: start;
            }


            .cert-tool-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 12px;
                flex-wrap: wrap;
            }


            .cert-grid {
                display: grid;
                grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
                gap: 18px;
                align-items: start;
            }


            .cert-card {
                background: #fff;
                border: 1px solid #eadfca;
                border-radius: 22px;
                box-shadow: 0 12px 30px rgba(0,0,0,.045);
                padding: 20px;
            }


            .cert-card h2 {
                margin: 0 0 14px;
                color: #143d2c;
                font-size: 22px;
                font-weight: 900;
            }


            .cert-form {
                display: grid;
                gap: 13px;
            }


            .cert-field {
                display: grid;
                gap: 7px;
                font-weight: 900;
            }


            .cert-field span {
                color: #173d2d;
                font-size: 13px;
            }


            .cert-field input,
            .cert-field textarea,
            .cert-field select {
                width: 100%;
                box-sizing: border-box;
                padding: 12px;
                border: 1px solid #ded4c2;
                border-radius: 14px;
                font-family: Cairo, system-ui, sans-serif;
                font-weight: 800;
                background: #fff;
            }


            .cert-field textarea {
                min-height: 84px;
                resize: vertical;
            }


            .cert-row {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }


            .cert-actions {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                align-items: center;
            }


            .cert-btn {
                border: 0;
                border-radius: 14px;
                padding: 12px 18px;
                font-family: Cairo, system-ui, sans-serif;
                font-weight: 900;
                cursor: pointer;
            }


            .cert-btn.primary {
                background: #143d2c;
                color: #fff;
            }


            .cert-btn.gold {
                background: #b8862b;
                color: #fff;
            }


            .cert-btn.light {
                background: #f7f2e6;
                color: #143d2c;
                border: 1px solid #eadfca;
            }


            .cert-btn.danger {
                background: #fff0f0;
                color: #b42318;
                border: 1px solid #ffc7c7;
            }


            .cert-btn:disabled {
                opacity: .6;
                cursor: not-allowed;
            }


            .cert-list {
                display: grid;
                gap: 12px;
            }


            .cert-status {
                padding: 10px 12px;
                border-radius: 14px;
                font-weight: 900;
            }


            .cert-status.error {
                background: #fff0f0;
                color: #b42318;
                border: 1px solid #ffc7c7;
            }


            .cert-status.ok {
                background: #ecfdf3;
                color: #087443;
                border: 1px solid #abefc6;
            }


            .cert-empty {
                border: 1px dashed #d7c8aa;
                border-radius: 18px;
                padding: 24px;
                text-align: center;
                color: #8b7650;
                font-weight: 900;
                background: #fffdf8;
            }



            .cert-card-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                flex-wrap: wrap;
            }


            .cert-badge-soft {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 7px 11px;
                border-radius: 999px;
                background: #f7f0df;
                color: #7a5a18;
                border: 1px solid #eadfca;
                font-weight: 900;
                font-size: 12px;
            }


            .cert-tool-head-actions {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }


            .cert-btn.tiny {
                padding: 8px 12px;
                border-radius: 12px;
                font-size: 13px;
            }


            .cert-card-head.compact {
                margin-bottom: 10px;
            }


            .compact-tabs {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                margin-bottom: 10px;
            }


            .tool-step {
                grid-template-columns: 32px minmax(50px, 1fr) 32px;
                grid-template-areas:
                    "label label label"
                    "plus input minus";
                align-items: end;
            }


            .tool-step span {
                grid-area: label;
            }


            .tool-step button {
                height: 40px;
                width: 32px;
                border: 0;
                border-radius: 11px;
                background: #143d2c;
                color: #fff;
                font-size: 19px;
                font-weight: 950;
                cursor: pointer;
            }


            .tool-step button:first-of-type {
                grid-area: minus;
            }


            .tool-step button:last-of-type {
                grid-area: plus;
            }


            .tool-step input {
                grid-area: input;
                min-width: 78px;
                padding-inline: 6px;
            }



            .tool-code input {
                min-width: 118px;
                direction: ltr;
                text-align: left;
                font-family: ui-monospace, Consolas, monospace;
                font-weight: 900;
            }


            .tool-color input[type="color"] {
                width: 58px;
                height: 40px;
                border: 1px solid #ded4c2;
                border-radius: 12px;
                padding: 4px;
                background: #fff;
                cursor: pointer;
            }


            .tool-btn {
                height: 40px;
                border-radius: 12px;
                border: 1px solid #eadfca;
                font-family: Cairo, system-ui, sans-serif;
                font-weight: 950;
                cursor: pointer;
                padding: 0 10px;
            }


            .tool-btn.light {
                background: #fffaf0;
                color: #143d2c;
            }


            .tool-btn.gold {
                background: #bd861b;
                color: #fff;
                border-color: #bd861b;
            }


            .tool-btn.danger {
                background: #fff1f1;
                color: #b42318;
                border-color: #ffc9c9;
            }


            .compact-help {
                margin-top: 10px;
                font-size: 12px;
                padding: 10px 12px;
            }



            .cert-sample-panel {
                margin-top: 12px;
                border: 1px solid #eadfca;
                background: #fffaf0;
                border-radius: 16px;
                padding: 12px;
            }


            .cert-sample-title {
                font-weight: 950;
                color: #143d2c;
                margin-bottom: 9px;
            }


            .cert-sample-grid {
                display: grid;
                grid-template-columns: 1fr 1.4fr .7fr;
                gap: 9px;
            }


            .cert-sample-grid label {
                display: grid;
                gap: 6px;
                font-size: 12px;
                font-weight: 950;
                color: #6f624d;
            }


            .cert-sample-grid input {
                height: 40px;
                border: 1px solid #ded4c2;
                border-radius: 12px;
                padding: 0 10px;
                font-family: Cairo, system-ui, sans-serif;
                font-weight: 800;
            }



            .cert-template-issue-action {
                display: flex;
                align-items: end;
                justify-content: flex-start;
            }


            .cert-template-issue-action .cert-btn {
                width: 100%;
                min-height: 45px;
                border-radius: 14px;
                font-weight: 950;
            }



            .cert-main-tabs {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
                margin: 16px 0;
                padding: 8px;
                background: #fffdf8;
                border: 1px solid #eadfca;
                border-radius: 20px;
                box-shadow: 0 14px 35px rgba(20,61,44,.06);
            }


            .cert-main-tabs button {
                border: 0;
                border-radius: 16px;
                padding: 15px 18px;
                cursor: pointer;
                font-family: Cairo, system-ui, sans-serif;
                font-size: 16px;
                font-weight: 950;
                background: #fff8e6;
                color: #143d2c;
                transition: .15s ease;
            }


            .cert-main-tabs button:hover {
                transform: translateY(-1px);
                box-shadow: 0 10px 20px rgba(20,61,44,.08);
            }


            .cert-main-tabs button.active {
                background: linear-gradient(135deg, #143d2c, #1f5a41);
                color: #fff;
                box-shadow: 0 14px 30px rgba(20,61,44,.18);
            }



            .cert-tab-issue .cert-issue-layout {
                max-width: 1180px;
                margin: 0 auto;
                display: grid;
                gap: 18px;
            }


            .cert-badge-selected {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 7px 11px;
                border-radius: 999px;
                background: #ecfdf3;
                color: #087443;
                border: 1px solid #abefc6;
                font-weight: 950;
                font-size: 12px;
            }
@media (max-width: 760px) {

                .cert-main-tabs {
                    grid-template-columns: 1fr;
                    gap: 7px;
                    padding: 7px;
                    margin: 10px 0;
                }


                .cert-main-tabs button {
                    padding: 12px 14px;
                    font-size: 14px;
                }


                .cert-tab-issue .cert-issue-layout {
                    max-width: none;
                    gap: 12px;
                }
}



            .cert-mini-action {
                border: 1px solid #eadfca;
                border-radius: 12px;
                padding: 9px 10px;
                font-family: Cairo, system-ui, sans-serif;
                font-weight: 950;
                cursor: pointer;
                min-height: 42px;
            }


            .cert-mini-action.danger-soft {
                background: #fff1f1;
                color: #b42318;
                border-color: #ffc9c9;
            }


            .cert-mini-action.success-soft {
                background: #ecfdf3;
                color: #087443;
                border-color: #abefc6;
            }



            .cert-tools-grid.compact.restored {
                display: grid;
                grid-template-columns: 1.05fr 1.25fr .9fr .8fr auto;
                gap: 8px;
                align-items: end;
            }


            .cert-tools-grid.compact.restored {
                display: grid !important;
                grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.25fr) minmax(110px, .85fr) minmax(110px, .85fr) 82px !important;
                gap: 10px !important;
                align-items: end !important;
                margin-bottom: 10px;
            }


            .cert-tools-grid.compact.restored label {
                min-width: 0;
                display: grid !important;
                gap: 5px !important;
                color: #6f624d;
                font-size: 12px;
                font-weight: 950;
            }


            .cert-tools-grid.compact.restored label:has(button) {
                grid-template-columns: 34px minmax(64px, 1fr) 34px !important;
                grid-template-areas:
                    "title title title"
                    "minus input plus";
            }


            .cert-tools-grid.compact.restored label > span {
                grid-area: title;
                text-align: center;
            }


            .cert-tools-grid.compact.restored label button:first-of-type {
                grid-area: minus;
            }


            .cert-tools-grid.compact.restored label button:last-of-type {
                grid-area: plus;
            }


            .cert-tools-grid.compact.restored input,
            .cert-tools-grid.compact.restored select {
                grid-area: input;
                width: 100% !important;
                min-width: 0 !important;
                height: 40px;
                border: 1px solid #ded4c2;
                border-radius: 12px;
                background: #fff;
                color: #143d2c;
                font-family: Cairo, system-ui, sans-serif;
                font-weight: 900;
                text-align: center;
                padding: 8px 8px;
            }


            .cert-tools-grid.compact.restored button:not(.cert-mini-action),
            .cert-tools-grid.compact.restored label button {
                height: 40px;
                border: 0;
                border-radius: 12px;
                background: #143d2c;
                color: #fff;
                font-family: Cairo, system-ui, sans-serif;
                font-weight: 950;
                cursor: pointer;
            }


            .cert-tools-grid.compact.restored .cert-mini-action {
                height: 40px;
                min-width: 0 !important;
                width: 100%;
            }


            .color-popover-wrap {
                position: relative;
                min-width: 0;
                display: grid;
                gap: 5px;
                color: #6f624d;
                font-size: 12px;
                font-weight: 950;
            }


            .color-popover-wrap > span {
                text-align: center;
            }


            /* امنع أي تمدد عرضي من الكروت */
            .cert-page,
            .cert-admin-page,
            .cert-card,
            .cert-page-grid,
            .cert-create-grid {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
@media (max-width: 1100px) {


                .cert-hero {
                    display: grid;
                }
}