/* =========================================================================
   YadeBus — habillage "application mobile" des pages au balisage DESKTOP
   -------------------------------------------------------------------------
   Ce fichier n'est chargé que par views/layouts/main.php : il rattrape, sur
   téléphone, les pages qui utilisent encore le balisage large du thème
   (tarifs, logements, voitures, profil...). L'accueil, lui, a sa propre vue
   téléphone (site/index-mobile) servie par layouts/mobile.php et habillée par
   css/mobile-app.css — il ne passe donc jamais par ici.

   TOUT ce fichier vit dans @media (max-width: 767.98px).
   Au-dessus de 768px (tablettes et ordinateurs) rien n'est appliqué :
   l'affichage actuel du site reste strictement inchangé.

   Design repris de https://yade-transit-go.base44.app/ (palette Tailwind).
   ========================================================================= */

/* Les deux barres (haut et bas) ne sont plus décrites ici : elles vivent dans
   css/mobile-shell.css, partagé avec layouts/mobile.php, pour que la navigation
   garde exactement la même apparence d'une page à l'autre. */

@media (max-width: 767.98px) {

  :root {
    /* Les couleurs viennent de palette.css, chargée avant celle-ci. */
    --yb-amber-400:   #fbbf24;
    --yb-ink:         #1f2937;   /* gray-800  */
    --yb-body:        #4b5563;   /* gray-600  */
    --yb-muted:       #9ca3af;   /* gray-400  */
    --yb-line:        #e5e7eb;   /* gray-200  */
    --yb-bg:          #f5f6f8;
    --yb-card:        #ffffff;
    --yb-radius:      16px;
    --yb-radius-sm:   12px;
    --yb-shadow:      0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --yb-shadow-lg:   0 10px 24px rgba(16,24,40,.10);
    --yb-topbar:      60px;
    --yb-tabbar:      64px;
  }

  /* ---------- Base ------------------------------------------------------ */

  html { -webkit-text-size-adjust: 100%; }

  body {
    background: var(--yb-bg) !important;
    color: var(--yb-body, #667085);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    /* Place pour les barres fixes haute et basse. */
    padding-top: var(--yb-topbar) !important;
    padding-bottom: calc(var(--yb-tabbar) + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
  }

  /* Le chrome "site web" n'a pas sa place dans une application. */
  .header-area,
  footer,
  .footer-area,
  .breadcrumb,
  .breadcrumb-area,
  .back-to-top,
  .preloader { display: none !important; }

  h1, h2, h3, h4, h5, h6 { color: var(--yb-ink, #101828); font-weight: 700; margin: 0 0 10px; }
  h1 { font-size: 21px; }
  h2 { font-size: 19px; }
  h3 { font-size: 17px; }
  h4, h5, h6 { font-size: 15px; }
  p  { font-size: 14px; }
  a  { color: var(--yb-blue, #0d65c9); }

  /* Les larges rembourrages du thème desktop écrasent l'écran d'un téléphone. */
  .padding-top-100px, .padding-bottom-100px,
  .padding-top-90px,  .padding-bottom-90px,
  .padding-top-80px,  .padding-bottom-80px,
  .padding-top-70px,  .padding-bottom-70px,
  .padding-top-60px,  .padding-bottom-60px,
  .padding-top-50px,  .padding-bottom-50px { padding-top: 16px !important; padding-bottom: 16px !important; }

  .padding-left-100px, .padding-right-100px,
  .padding-left-50px,  .padding-right-50px { padding-left: 0 !important; padding-right: 0 !important; }

  .container, .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
  .row { margin-left: -6px !important; margin-right: -6px !important; }
  .row > [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }
  .section-block { display: none; }

  /* ---------- Cartes ---------------------------------------------------- */

  .card, .panel, .well,
  .single-content-item, .card-item, .card-body,
  .contact-form-action, .form-box,
  .booking-form, .sidebar-widget, .widget-box {
    background: var(--yb-card) !important;
    border: 0 !important;
    border-radius: var(--yb-radius) !important;
    box-shadow: var(--yb-shadow) !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
  }
  .panel-heading, .card-header {
    background: transparent !important; border: 0 !important;
    padding: 0 0 10px !important;
    font-size: 15px; font-weight: 700; color: var(--yb-ink, #101828);
  }
  .panel-body, .card-body { padding: 0 !important; box-shadow: none !important; }

  /* ---------- Formulaires ----------------------------------------------- */

  .form-control, .form-group input, .form-group select, .form-group textarea,
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=number], input[type=date], input[type=time], input[type=search],
  select, textarea {
    width: 100% !important;
    height: auto !important;
    min-height: 48px;
    background: #f7f8fa !important;
    border: 1px solid #eceef2 !important;
    border-radius: var(--yb-radius-sm) !important;
    padding: 12px 14px !important;
    font-size: 15px !important;   /* >=16px évite le zoom iOS ; 15 reste lisible */
    color: var(--yb-ink, #101828) !important;
    box-shadow: none !important;
    -webkit-appearance: none;
  }
  textarea { min-height: 96px; }

  /* ---------- Bloc de réservation, façon maquette mobile ------------------ */

  /* Onglets : deux moitiés égales occupant toute la largeur, avec un filet de
     séparation sous la barre — au lieu de deux pastilles centrées. */
  .yb-booking-tabs { gap: 0 !important; border-bottom: 1px solid var(--yb-line, #e7eaf0) !important; }
  .yb-booking-tabs .nav-item { flex: 1 1 0; }
  .yb-booking-tabs .nav-link {
    flex-direction: row !important; gap: 8px !important;
    width: 100%; padding: 14px 6px !important;
    font-size: 15px !important; font-weight: 600 !important;
  }
  .yb-booking-tabs .nav-link i { font-size: 20px !important; }
  .yb-booking-tabs .nav-link.active { border-bottom-width: 3px !important; }

  /* Pictogrammes des champs : bleu au départ, ambre à l'arrivée, comme sur la
     maquette. On cible par le champ qu'ils accompagnent. */
  .form-group:has(#depart) .form-icon,
  .form-group:has(#depColis) .form-icon { color: var(--yb-blue, #0d65c9) !important; }
  .form-group:has(#destination) .form-icon,
  .form-group:has(#destColis) .form-icon { color: var(--yb-amber, #f59e0b) !important; }
  .form-icon { font-size: 18px; }

  /* Les libellés au-dessus des champs disparaissent : le placeholder porte
     l'information, comme dans la maquette. */
  .hero-wrapper8 .search-fields-container .label-text { display: none !important; }

  /* Cases et boutons radio : ce sont des contrôles, pas des champs de saisie —
     ils ne doivent hériter ni de la largeur ni de la hauteur ci-dessus. */
  input[type=radio], input[type=checkbox] {
    width: 18px !important; height: 18px !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 8px 0 0 !important; flex: 0 0 18px;
    accent-color: var(--yb-blue, #0d65c9);
    background: #fff !important; border: 1px solid #d1d5db !important;
    border-radius: 4px !important; -webkit-appearance: auto; appearance: auto;
    vertical-align: middle;
  }
  input[type=radio] { border-radius: 50% !important; }
  input[type=radio] + label, input[type=checkbox] + label,
  label > input[type=radio], label > input[type=checkbox] { display: inline-block; }
  .radio, .checkbox, .radio-inline, .checkbox-inline {
    display: inline-flex !important; align-items: center;
    margin: 0 14px 0 0 !important; padding: 0 !important;
    font-size: 14px; font-weight: 500; color: var(--yb-ink, #101828);
  }
  .radio label, .checkbox label, .radio-inline, .checkbox-inline {
    display: inline-flex !important; align-items: center; margin-bottom: 0;
    font-size: 14px; font-weight: 500; color: var(--yb-ink, #101828);
  }
  /* Un groupe de choix se lit sur une ligne, comme « Aller simple / Aller-retour ».
     Les radios sont ici imbriqués dans des <label> à l'intérieur de .radioOpt :
     un sélecteur visant l'input direct ne les atteignait pas. */
  .radioOpt,
  .form-group:has(> input[type=radio]),
  .form-group:has(> label > input[type=radio]) {
    display: flex !important; flex-direction: row; align-items: center;
    gap: 18px; flex-wrap: wrap;
  }
  .radioOpt label {
    display: inline-flex !important; align-items: center; margin: 0 !important;
    font-size: 14px; font-weight: 500; color: var(--yb-ink, #101828); white-space: nowrap;
  }
  .field-optionBillet { margin-bottom: 10px !important; }
  .field-optionBillet .help-block { display: none; }

  /* Le thème pose margin-top:35px sur le bouton pour l'aligner avec les champs en
     grille ; empilé sur téléphone, il se retrouvait collé sous la date.
     Le <style> de la page annule ce margin (.hero-wrapper8 .search-fields-container
     .margin-top-35px { margin-top:0 }) avec la même spécificité mais plus tard dans
     la cascade : on ajoute donc un niveau pour repasser devant. */
  .hero-wrapper8 .search-fields-container .theme-btn.margin-top-35px,
  .hero-wrapper8 .search-fields-container .col-lg-2 .theme-btn,
  .search-fields-container .theme-btn.margin-top-35px { margin-top: 20px !important; }
  .form-control:focus, input:focus, select:focus, textarea:focus {
    background: #fff !important;
    border-color: var(--yb-blue, #0d65c9) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
    outline: none !important;
  }
  ::placeholder { color: var(--yb-muted, #98a2b3); }
  label, .control-label {
    font-size: 12px; font-weight: 600; color: var(--yb-body, #667085);
    margin-bottom: 6px; display: block;
  }
  .form-group { margin-bottom: 12px; }
  .help-block { font-size: 11px; }

  /* Le thème place .form-icon en absolu PAR-DESSUS le champ et compte sur le
     padding-left de l'input pour dégager la place. Mon padding uniforme l'avait
     supprimée : le texte passait sous l'icône. On rétablit la réserve, uniquement
     pour les champs effectivement précédés d'une icône. */
  .form-icon { z-index: 2; pointer-events: none; }
  .form-icon ~ input,
  .form-icon ~ select,
  .form-icon ~ textarea,
  .form-group:has(> .form-icon) input,
  .form-group:has(> .form-icon) select { padding-left: 40px !important; }
  .form-icon ~ .select2-container .select2-selection__rendered,
  .form-group:has(> .form-icon) .select2-selection__rendered { padding-left: 40px !important; }

  /* Select2 doit ressembler aux autres champs — et son fond doit couvrir
     exactement la même boîte, sans débord ni manque. */
  .select2-container { width: 100% !important; display: block !important; }
  .select2-container--default .select2-selection--single {
    height: 48px !important; min-height: 48px !important; box-sizing: border-box !important;
    background: #f7f8fa !important;
    border: 1px solid #eceef2 !important; border-radius: var(--yb-radius-sm) !important;
    display: flex !important; align-items: center !important;
    padding: 0 !important; margin: 0 !important; overflow: hidden;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.3 !important; height: auto !important;
    padding: 0 34px 0 14px !important; margin: 0 !important;
    color: var(--yb-ink, #101828) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important; top: 0 !important; right: 6px !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--yb-muted, #98a2b3) !important;
  }
  .select2-dropdown { border-radius: var(--yb-radius-sm); border-color: var(--yb-line, #e7eaf0); }
  .select2-container--open .select2-dropdown { z-index: 1060; }

  /* Placé APRÈS le bloc Select2 : à !important égal, c'est la dernière règle qui
     l'emporte. Déclaré plus haut, l'offset d'icône était annulé par le padding
     générique ci-dessus, et le libellé repassait sous le pictogramme. */
  .form-icon ~ .select2-container .select2-selection__rendered,
  .form-group:has(> .form-icon) .select2-selection__rendered {
    padding-left: 42px !important;
  }
  .form-icon ~ input,
  .form-icon ~ select,
  .form-group:has(> .form-icon) input,
  .form-group:has(> .form-icon) select { padding-left: 42px !important; }

  /* ---------- Boutons --------------------------------------------------- */

  .btn, button, input[type=submit], .theme-btn, .button-fill {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px;
    padding: 13px 20px !important;
    border: 0 !important;
    border-radius: var(--yb-radius-sm) !important;
    font-size: 15px !important; font-weight: 600 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
  }
  .btn-primary, .theme-btn, input[type=submit], button[type=submit], .btn-success {
    width: 100%;
    background: linear-gradient(135deg, var(--yb-blue, #0d65c9), var(--yb-blue-dark, #0a52a4)) !important;
    color: #fff !important;
  }
  .btn-primary:active, .theme-btn:active, button[type=submit]:active { filter: brightness(.94); }
  .btn-default, .btn-secondary { background: #eef0f4 !important; color: var(--yb-ink, #101828) !important; }
  .btn-danger  { background: #fef2f2 !important; color: #dc2626 !important; }
  .btn-warning { background: #fffbeb !important; color: #b45309 !important; }
  .btn-link    { background: none !important; color: var(--yb-blue, #0d65c9) !important; min-height: 0; padding: 0 !important; width: auto; }
  .btn-sm, .btn-xs { min-height: 38px; padding: 8px 14px !important; font-size: 13px !important; width: auto; }
  .btn-group { display: flex; width: 100%; gap: 8px; }
  .btn-group > .btn { flex: 1; }

  /* ---------- Tableaux : reformatés en cartes --------------------------- */

  .table-responsive { border: 0 !important; overflow: visible !important; }
  table.table { background: transparent; border: 0; margin: 0; }
  table.table thead { display: none; }          /* les libellés passent devant chaque valeur */
  table.table tbody tr {
    display: block;
    background: var(--yb-card);
    border-radius: var(--yb-radius);
    box-shadow: var(--yb-shadow);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  table.table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 0 !important; padding: 6px 0 !important;
    font-size: 13px; color: var(--yb-ink, #101828); text-align: right;
  }
  table.table tbody td + td { border-top: 1px solid #f1f2f5 !important; }
  table.table tbody td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 600; color: var(--yb-muted, #98a2b3);
    text-align: left; flex: 0 0 auto;
  }

  /* GridView de Yii */
  .grid-view { background: transparent; border: 0; }
  .grid-view .summary, .grid-view .filters { display: none !important; }
  .grid-view table.table tbody td:last-child { justify-content: flex-end; }

  .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 6px 0 2px; }
  .pagination > li > a, .pagination > li > span {
    border-radius: 10px !important; border: 1px solid var(--yb-line, #e7eaf0) !important;
    min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    color: var(--yb-body, #667085);
  }
  .pagination > .active > a, .pagination > .active > span {
    background: var(--yb-blue, #0d65c9) !important; border-color: var(--yb-blue, #0d65c9) !important; color: #fff !important;
  }

  /* ---------- Alertes --------------------------------------------------- */

  .alert {
    border: 0 !important; border-radius: var(--yb-radius-sm) !important;
    padding: 12px 14px !important; font-size: 13px; margin-bottom: 12px;
  }
  .alert-success { background: #ecfdf5 !important; color: #047857 !important; }
  .alert-danger, .alert-error { background: #fef2f2 !important; color: #b91c1c !important; }
  .alert-warning { background: #fffbeb !important; color: #b45309 !important; }
  .alert-info    { background: var(--yb-blue-50, #ebf2fa) !important; color: var(--yb-blue-dark, #0a52a4) !important; }

  /* ---------- Bandeau de section (façon héros de l'app) ----------------- */

  .yb-hero {
    margin: -4px -14px 14px;
    padding: 18px 16px 20px;
    background: linear-gradient(135deg, var(--yb-blue, #0d65c9), var(--yb-blue-dark, #0a52a4));
    color: #fff;
  }
  .yb-hero h1, .yb-hero h2, .yb-hero h3 { color: #fff; margin-bottom: 4px; font-size: 19px; }
  .yb-hero p { color: rgba(255,255,255,.85); font-size: 13px; margin: 0; }

  /* ---------- Divers ---------------------------------------------------- */

  img { max-width: 100%; height: auto; }
  .owl-carousel .owl-item img { border-radius: var(--yb-radius-sm); }
  .modal-content { border-radius: var(--yb-radius) !important; border: 0 !important; }
  .modal-dialog { margin: 12px !important; }

  /* Rien ne doit pouvoir déborder latéralement dans une app. */
  .table-responsive, pre, .owl-stage-outer { max-width: 100%; }
}