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


   Devis Form – Front-end styles


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


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





:root {

    --dvf-primary:   #D24B16;


    --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: inherit, 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: inherit, sans-serif;


}





.dvf-field input:focus,


.dvf-field textarea:focus {


    border-color: var(--dvf-primary); 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;


}





/* ── 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: #1A2E4A;


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


}





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


    border-color: var(--dvf-primary);


    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: var(--dvf-primary);


    line-height: 1.3;


}





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


    color: var(--dvf-primary);


}





/* ── 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: var(--dvf-primary); outline: none;


    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;


}

button.dvf-tab-btn.dvf-tab-active {
    display: none;
}