/* ============================================================

   Devis Form – Front-end styles

   ICT · https://ict.com.tn/ · v1.0.0

   ============================================================ */



:root {

    --dvf-text:      #333333;

    --dvf-label:     #222222;

    --dvf-hint:      #666666;

    --dvf-radius:    4px;

}



/* RTL support */

.dvf-wrapper[dir="rtl"] .dvf-field label { text-align: right; }

.dvf-wrapper[dir="rtl"] .dvf-submit      { text-align: left; }

.dvf-wrapper[dir="rtl"] input,

.dvf-wrapper[dir="rtl"] textarea         { direction: rtl; text-align: right; }

.dvf-wrapper[dir="rtl"] .dvf-tab-nav     { direction: rtl; }

.dvf-wrapper[dir="rtl"] .dvf-cards-grid  { direction: rtl; }



/* ── Wrapper ─────────────────────────────────────────────── */

.dvf-wrapper { max-width: 100%; font-family: 'Sora', sans-serif; color: var(--dvf-text); }



/* ── Standard fields ─────────────────────────────────────── */

.dvf-field { margin-bottom: 18px; }



.dvf-field label {

    display: block; font-weight: 600; margin-bottom: 5px;

    color: var(--dvf-label);

}



.dvf-star { color: #c0392b; margin-left: 2px; }



.dvf-field input[type="text"],

.dvf-field input[type="email"],

.dvf-field input[type="tel"],

.dvf-field textarea {

    width:100%; padding:8px 10px; border:1px solid #ccc; border-radius:3px;



    box-sizing:border-box;  line-height:1.5; color:#333;



    background:#fff; transition:border-color .2s; font-family: 'Sora';

}



.dvf-field input:focus,

.dvf-field textarea:focus {

    border-color: #2A497A; outline: none;

    box-shadow: 0 0 0 2px rgba(42, 73, 122, .15);

}



.dvf-field textarea { resize: vertical; min-height: 110px; }



/* ── Services section ────────────────────────────────────── */

.dvf-services-section { margin-bottom: 24px; }



.dvf-services-question {

    font-weight: 700; letter-spacing: .06em;

    text-transform: uppercase; color: var(--dvf-label);

    margin: 0 0 14px;

}



/* ── Tabs navigation ─────────────────────────────────────── */

.dvf-tab-nav {

    display: flex; flex-wrap: wrap;

    border-bottom: 1px solid #dde0e8;

    margin-bottom: 0;

    gap: 0;

}



/* .dvf-tab-btn {

    background: none; border: none;

    padding: 10px 20px;

    font-weight: 600; letter-spacing: .05em;

    text-transform: uppercase; color: var(--dvf-hint);

    cursor: pointer; border-bottom: 3px solid transparent;

    margin-bottom: -1px; transition: color .2s, border-color .2s;

    white-space: nowrap; font-family: 'Sora', sans-serif;

}



.dvf-tab-btn:hover { color: #2A497A; }



.dvf-tab-btn.dvf-tab-active {

    color: #2A497A;

} */



/* ── Tab panels ──────────────────────────────────────────── */

.dvf-tab-panel {

    display: none;

    border: 1px solid #dde0e8; border-top: none;

    padding: 20px;

    border-radius: 0 0 var(--dvf-radius) var(--dvf-radius);

}



.dvf-tab-panel.dvf-panel-active { display: block; }



/* ── Service cards grid ──────────────────────────────────── */

.dvf-cards-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}



.dvf-card {

    display: inline-flex;

    cursor: pointer;

    user-select: none;

}



.dvf-card-checkbox { display: none; }



.dvf-card-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    width: 310px;

    min-height: 110px;

    padding: 16px 10px 12px;

    border: 1.5px solid #dde0e8;

    border-radius: var(--dvf-radius);

    background: #ffffff;

    transition: border-color .15s, background .15s, box-shadow .15s;

    text-align: center;

    gap: 10px;

}



.dvf-card:hover .dvf-card-inner {

    border-color: #68AD3B;

    box-shadow: 0 2px 8px rgba(42, 73, 122, .1);

}



.dvf-card.dvf-card-selected .dvf-card-inner {

    border-color: #2A497A;

    background: #eeeef7;

    box-shadow: 0 2px 8px rgba(42, 73, 122, .15);

}



.dvf-card-icon {

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

    width: 56px; height: 56px; flex-shrink: 0;

}



.dvf-card-icon img {

    max-width: 100%; max-height: 100%; object-fit: contain;

}



.dvf-no-icon {

    font-size: 28px; color: #dde0e8;

}



.dvf-card-name {

    font-weight: 700;

    color: #2A497A;

    line-height: 1.3;

}



.dvf-card.dvf-card-selected .dvf-card-name {

    color: #2A497A;

}



/* ── File upload ─────────────────────────────────────────── */

.dvf-file-wrapper {

    width: 100%; box-sizing: border-box;

    border: 1px solid #dde0e8; border-radius: var(--dvf-radius);

    padding: 9px 12px; background: #f9f9f9; transition: border-color .2s;

}



.dvf-file-wrapper:focus-within {

    border-color: #2A497A;

    box-shadow: 0 0 0 2px rgba(42, 73, 122, .15);

}



.dvf-file-wrapper input[type="file"] {

    width: 100%; cursor: pointer; border: none; background: transparent; outline: none;

}



.dvf-allowed-types { margin: 4px 0 0; color: var(--dvf-hint); }



/* ── Submit ──────────────────────────────────────────────── */

.dvf-submit { text-align: right; margin-top: 10px; }



/* ── Messages ────────────────────────────────────────────── */

.dvf-messages { margin-top: 14px; margin-bottom: 0; }



.dvf-messages.dvf-success {

    background: #d4edda; color: #155724;

    border: 1px solid #c3e6cb; padding: 10px 14px; border-radius: var(--dvf-radius);

}



.dvf-messages.dvf-error {

    background: #f8d7da; color: #721c24;

    border: 1px solid #f5c6cb; padding: 10px 14px; border-radius: var(--dvf-radius);

}



/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 767px) {

    .dvf-tab-btn   { padding: 8px 12px; font-size: 1.2rem; }

    .dvf-card-inner {min-height: 95px; padding: 12px 8px; }

    .dvf-card-icon  { width: 44px; height: 44px; }

    .dvf-tab-nav { justify-content: center;}

}



button.dvf-tab-btn {

    background-color: white;

    color: #1C3D71;

    padding: 10px 20px 10px 20px;

    margin-bottom: 10px;

    margin-right: 5px;

    border-radius: 12px;

    border: 1px solid #1C3D71;

    cursor: pointer;

    transition: background-color .2s, color .2s;

}



button.dvf-tab-btn.dvf-tab-active,

button.dvf-tab-btn:hover {

    background-color: #1C3D71;

    color: white;

}

span.dvf-card-name {

    text-transform: uppercase !important;

}



/* ── Background image mode ───────────────────────────────── */

.dvf-card-inner.dvf-card-bg {

    justify-content: flex-end;

    padding: 0;

    overflow: hidden;

    position: relative;

}



.dvf-card-inner.dvf-card-bg .dvf-card-name {

    width: 100%;

    padding: 8px 10px;

    background: rgba(0, 0, 0, .35);

    font-weight: 700;

    text-align: center;

    line-height: 1.3;

}