/*
 * Palette de l'application.
 *
 * Declaree ici et non dans order-prep-reset.css : cette derniere n'est chargee
 * sur aucune vue, si bien que les variables n'existaient nulle part et que
 * chaque `var(--op-ink)` sans repli etait purement ignore. order-prep.css, elle,
 * est servie sur toutes les vues.
 *
 * L'interface est volontairement sobre : la couleur ne subsiste que sur les
 * boutons qui terminent une action (« J'ai fini de preparer », validation d'un
 * SAV). Sur un fond entierement neutre, c'est le seul endroit ou l'oeil doit
 * etre attire.
 */
:root {
    --op-ink: #16181b;
    --op-ink-hover: #000000;
    --op-action: #00e2be;
    --op-action-hover: #00c8a9;
}

/* 
 * Styles pour l'application Order Prep
 * Version avec isolation complète contre Breakdance
 */

/* ISOLATION BREAKDANCE - CRITIQUE */
.order-prep-full-page {
    all: initial !important;
    display: block !important;
    width: 100% !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    font-family: 'Open Sans', sans-serif !important;
    background-color: #ffffff !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999999 !important;
    overflow: auto !important;
    margin: 0 !important;
    /*
     * Rien sur les cotes ni en bas, la reserve de l'encoche en haut.
     *
     * Elle etait declaree dans order-prep-pwa.css, sous « display-mode:
     * standalone », mais sans « !important » : le « padding: 0 !important »
     * qui tenait cette ligne la effaçait. L'encoche mangeait donc le haut de
     * chaque ecran depuis toujours, et les quatre versions passees a la
     * corriger ailleurs ne pouvaient rien y faire.
     *
     * La reserve est prise sans condition : dans un onglet Safari, la barre du
     * navigateur couvre deja l'encoche et env() vaut zero. Il n'y a donc rien a
     * detecter, et une detection de moins est une panne de moins.
     */
    padding: env(safe-area-inset-top, 0px) 0 0 !important;
}

/* Forcer l'isolation de tous les enfants */
.order-prep-full-page,
.order-prep-full-page * {
    box-sizing: border-box !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Masquer complètement Breakdance quand Order Prep est actif */
body.order-prep-app #site,
body.order-prep-app header,
body.order-prep-app footer,
body.order-prep-app .breakdance,
body.order-prep-app [class*="breakdance"],
body.order-prep-app [id*="breakdance"],
body.order-prep-app .bde-header,
body.order-prep-app .bde-footer,
body.order-prep-app .bde-main {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Supprimer les dépendances Breakdance */
.order-prep-full-page::before {
    content: "" !important;
}

/* Reset complet pour l'application */
.order-prep-app {
    all: initial !important;
    background-color: #ffffff !important;
    font-family: 'Open Sans', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    overflow: auto !important;
}

.order-prep-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-bottom: calc(var(--order-prep-nav-total, 60px) + 20px) !important; /* Espace pour le menu du bas + safe area */
    background-color: #ffffff !important;
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
}

.order-prep-app-wrapper {
    text-align: center !important;
    width: 90% !important;
    max-width: 600px !important;
    padding: 2rem !important;
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
}

/* Header de l'application */
.order-prep-header {
    margin-bottom: 1.5rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 1rem !important;
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
}

.order-prep-header h1 {
    font-size: 16px !important;
    margin: 0 !important;
    font-weight: normal !important;
    color: #333 !important;
    font-family: 'Open Sans', sans-serif !important;
}

.order-prep-button-back {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    font-family: 'Open Sans', sans-serif !important;
    border: none !important;
}

.order-prep-button-back:hover {
    background-color: #e0e0e0 !important;
}

/* Logo */
.order-prep-logo {
    margin-bottom: 2rem !important;
}

.order-prep-logo img {
    max-width: 150px !important;
    height: auto !important;
}

/* Statut des commandes */
.order-prep-status {
    margin-bottom: 2rem !important;
}

.order-prep-status-text {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #333 !important;
    font-family: 'Open Sans', sans-serif !important;
}

.order-prep-count {
    font-weight: bold !important;
}

/* Bouton d'action */
.order-prep-actions {
    margin-bottom: 3rem !important;
}

.order-prep-button {
    display: inline-block !important;
    background-color: #16181b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(53, 221, 198, 0.2) !important;
    font-family: 'Open Sans', sans-serif !important;
}

.order-prep-button:hover {
    background-color: #2bc0ab !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 8px rgba(53, 221, 198, 0.3) !important;
}

.order-prep-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(53, 221, 198, 0.2) !important;
}

/* Contenu principal */
.order-prep-content {
    margin-bottom: 3rem !important;
    text-align: left !important;
    width: 100% !important;
}

/* Pied de page */
.order-prep-footer {
    margin-top: auto !important;
}

.order-prep-version {
    font-size: 12px !important;
    color: #888 !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Styles spécifiques à la page des commandes */
.orders-list-page {
    justify-content: flex-start !important;
    padding-top: 1rem !important;
}

.orders-list-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.order-prep-waiting {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #666 !important;
}

.waiting-count {
    font-weight: bold !important;
    margin-left: 3px !important;
}

.orders-list {
    width: 100% !important;
}

.order-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
    background-color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
}

.order-item:last-child {
    border-bottom: none !important;
}

.order-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.order-primary-info {
    display: block !important;
    margin-bottom: 0.25rem !important;
}

.order-number {
    font-weight: bold !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
    font-family: 'Open Sans', sans-serif !important;
    display: inline-block !important;
}

.order-customer {
    font-size: 14px !important;
    font-weight: normal !important;
    font-family: 'Open Sans', sans-serif !important;
    display: block !important;
    margin-top: 4px !important;
}

.order-secondary-info {
    font-size: 13px !important;
    color: #666 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    font-family: 'Open Sans', sans-serif !important;
}

.order-date {
    margin-right: 10px !important;
}

.order-shipping {
    font-style: italic !important;
}

.order-price {
    font-weight: bold !important;
    font-size: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-right: 15px !important;
    font-family: 'Open Sans', sans-serif !important;
}

.order-action {
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.prep-button {
    background-color: var(--op-ink) !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: 4px !important;
    font-weight: normal !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    height: 36px !important;
    font-family: 'Open Sans', sans-serif !important;
}

.prep-button:hover {
    background-color: var(--op-ink-hover) !important;
}

.no-orders {
    text-align: center !important;
    padding: 2rem !important;
    color: #666 !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Modal de recherche - ISOLATION CRITIQUE */
.order-prep-search-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999999 !important;
    justify-content: center !important;
    align-items: center !important;
    font-family: 'Open Sans', sans-serif !important;
}

.search-modal-content {
    background-color: #fff !important;
    width: 90% !important;
    max-width: 500px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
}

.search-modal-header {
    padding: 1rem !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: 'Open Sans', sans-serif !important;
}

.search-modal-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-family: 'Open Sans', sans-serif !important;
}

.close-modal {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: #666 !important;
}

.search-modal-body {
    padding: 1rem !important;
    overflow-y: auto !important;
    font-family: 'Open Sans', sans-serif !important;
}

.search-form {
    display: flex !important;
    margin-bottom: 1rem !important;
}

#order-search-input {
    flex: 1 !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px 0 0 4px !important;
    font-size: 14px !important;
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
}

#order-search-submit {
    background-color: var(--op-ink) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 0 4px 4px 0 !important;
    cursor: pointer !important;
    font-family: 'Open Sans', sans-serif !important;
}

.search-message {
    padding: 10px !important;
    text-align: center !important;
    color: #666 !important;
    font-size: 14px !important;
    font-family: 'Open Sans', sans-serif !important;
}

.no-results-message {
    color: #666 !important;
    text-align: center !important;
    padding: 15px !important;
    font-family: 'Open Sans', sans-serif !important;
}

.highlight {
    background-color: rgba(0, 0, 0, 0.1) !important;
    animation: highlight-fade 2s forwards !important;
}

@keyframes highlight-fade {
    0% { background-color: rgba(0, 0, 0, 0.1) !important; }
    100% { background-color: transparent !important; }
}

/* Style pour la méthode d'expédition */
.order-shipping-method {
    display: block !important;
    font-size: 12px !important;
    color: #666 !important;
    margin-top: 5px !important;
    font-weight: normal !important;
    font-style: italic !important;
    text-align: right !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Mise à jour des styles de la zone de prix */
.order-price {
    font-weight: bold !important;
    font-size: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-right: 15px !important;
    min-width: 100px !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Style amélioré pour le lien "En attente" */
.order-prep-waiting {
    display: flex !important;
    align-items: center !important;
}

.waiting-link {
    display: flex !important;
    align-items: center !important;
    background-color: #f5f5f5 !important;
    color: #666 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Open Sans', sans-serif !important;
}

.waiting-link:hover {
    background-color: #eeeeee !important;
    color: var(--op-ink) !important;
}

.waiting-link svg {
    margin-right: 6px !important;
    color: var(--op-ink) !important;
}

.waiting-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--op-ink) !important;
    color: white !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    font-weight: bold !important;
    margin-left: 6px !important;
}

/* Order number line container */
.order-primary-info .order-number-line {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
}

.order-number-line .order-number {
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

.order-number-line .order-status {
    margin: 0 !important;
}

/*
 * Statut de commande.
 *
 * Le badge est un reperage, pas un titre : il sert a distinguer d'un coup d'oeil
 * une ligne terminee d'une ligne en cours, la ou le numero de commande est ce
 * qu'on lit vraiment. A 12 pixels et 12 de marge laterale il faisait cent
 * pixels de large, soit autant de poids visuel que le numero lui-meme.
 */
.order-status {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    color: white !important;
    text-align: center !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
}

.order-status-completed {
    background-color: #4CAF50 !important;
}

.order-status-processing {
    background-color: #2196F3 !important;
}

.order-status-on-hold {
    background-color: #FF9800 !important;
}

.order-status-pending {
    background-color: #9E9E9E !important;
}

.order-status-cancelled {
    background-color: #F44336 !important;
}

.order-status-refunded {
    background-color: #9E9E9E !important;
}

.order-status-failed {
    background-color: #d32f2f !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .order-prep-app-wrapper {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .order-prep-status-text {
        font-size: 16px !important;
    }
    
    .order-prep-button {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
    
    .order-prep-header h1 {
        font-size: 16px !important;
    }
    
    .orders-list-wrapper {
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    .order-prep-app-wrapper {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .order-prep-logo img {
        max-width: 120px !important;
    }
    
    .order-prep-status-text {
        font-size: 15px !important;
    }
    
    .order-prep-header h1 {
        font-size: 16px !important;
    }
    
    .search-modal-content {
        width: 95% !important;
    }
    
    .order-shipping-method {
        font-size: 11px !important;
    }
    
    .order-price {
        min-width: 80px !important;
    }
    
    .order-status {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
}

/* Styles pour la page d'accueil - complètement refaits pour garantir le centrage */
.order-prep-home-container {
    width: 100% !important;
    min-height: 100vh !important;
    /* dvh : sur un telephone, 100vh ne tient pas compte des barres de Safari.
       L'ecran d'accueil se croyait plus haut qu'il ne l'etait. */
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* Le menu du bas est en position fixe : il recouvre les derniers pixels du
       conteneur. Sans cette reserve, le contenu, centre dans toute la hauteur,
       passait dessous des que l'ecran etait court. Sur un iPhone SE, dont Safari
       ne laisse que 553 pixels utiles, le bouton de deconnexion se retrouvait
       cache de 21 pixels, et la page ne defilant pas, il devenait inatteignable. */
    padding: 20px 20px calc(var(--order-prep-nav-total, 60px) + 20px) !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    font-family: 'Open Sans', sans-serif !important;
    /* Surtout pas position: fixed + z-index: 999999 ici : ce conteneur plein écran
       passait alors AU-DESSUS du menu du bas (z-index 500) et le recouvrait
       entièrement de blanc. Le menu était bien rendu, simplement masqué.
       Il reste dans le flux, sous le menu, comme sur les autres vues. */
    position: relative !important;
    z-index: 1 !important;
}

.order-prep-home-wrapper {
    width: 100% !important;
    max-width: 600px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Logo */
.order-prep-home-logo {
    margin-bottom: 40px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.order-prep-home-logo img {
    max-width: 150px !important;
    height: auto !important;
}

/* Contenu principal */
.order-prep-home-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    margin-bottom: 40px !important;
}

/* Sections individuelles */
.order-prep-home-section {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
}

/* Texte de statut */
.order-prep-home-status {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 !important;
    text-align: center !important;
    font-family: 'Open Sans', sans-serif !important;
}

/* Boutons */
.order-prep-home-button {
    display: inline-block !important;
    background-color: var(--op-ink) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(var(--op-ink), 0.2) !important;
    text-align: center !important;
    min-width: 200px !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
    font-family: 'Open Sans', sans-serif !important;
}

.order-prep-home-button:hover {
    background-color: var(--op-ink) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 8px rgba(var(--op-ink), 0.3) !important;
}

/* Pied de page */
.order-prep-home-footer {
    margin-top: auto !important;
    width: 100% !important;
    text-align: center !important;
}

/* Isolation spéciale contre Breakdance dans les modales */
.order-prep-search-modal *,
.order-prep-info-modal *,
.order-prep-comment-modal *,
.order-prep-confirm-modal *,
.view-info-modal *,
.view-comment-modal *,
.order-products-modal *,
.sav-modal * {
    font-family: 'Open Sans', sans-serif !important;
    box-sizing: border-box !important;
}

/* Verrouillage du défilement pendant qu'une modale est ouverte (cf. order-prep.js).
   Sans cela, la page défile derrière l'overlay sur iOS. */
body.op-modal-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
}

/*
 * Barre de recherche : la loupe et la croix ne doivent pas chevaucher le texte.
 *
 * Le champ reserve 40 pixels de chaque cote pour les deux icones, mais le theme
 * de la boutique impose son propre `padding: 12px 16px` avec un selecteur
 * d'attribut (`input[type="text"]`), plus specifique qu'une simple classe. La
 * reserve sautait donc, la loupe se posait sur la premiere lettre et la croix
 * sur la derniere. On prefixe par `.order-prep-full-page` pour repasser devant.
 */
.order-prep-full-page .sticky-search-input {
    padding: 10px 46px 10px 42px !important;
}

/*
 * La croix mesure 44 pixels, le minimum tactile, dans un champ qui n'en fait que
 * 40 : sans centrage elle depassait en haut et en bas et dessinait un carre
 * gris au bord du champ.
 */
.order-prep-full-page .search-clear-btn {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 2px !important;
    background: transparent !important;
    border: none !important;
}

.order-prep-full-page .search-icon {
    left: 12px !important;
}

/*
 * Une commande deja prise en main, dans la liste.
 *
 * Elle reste ouvrable : le nom suffit a faire hesiter, et l'autre preparateur
 * a peut-etre simplement oublie son onglet.
 */
.order-item.is-claimed {
    background: #fef7f6;
}

/*
 * L'etiquette qui dit qu'un collegue est deja sur la commande.
 *
 * En rouge et en pastille pleine : la mention discrete se lisait comme un
 * complement d'adresse, alors qu'elle previent d'un doublon de colis. C'est la
 * seule chose de cette ligne qui doive arreter le regard.
 */
.order-claimed-by {
    display: inline-flex;
    align-items: center;
    /* La ligne est un conteneur flex : sans cela, l'etiquette s'etire sur toute
       la largeur disponible et cesse de ressembler a une pastille. */
    align-self: flex-start;
    width: fit-content;
    gap: 5px;
    margin-top: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #d93025;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.order-claimed-by::before {
    /* Un point, pour que l'etiquette se reconnaisse sans etre lue. */
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.85;
}

/* Le pied de liste, quand il reste des commandes a charger. */
.orders-load-more {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}

.orders-load-more-button {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #d9dce1;
    border-radius: 8px;
    background: #ffffff;
    color: #2b2f36;
    font-size: 14px;
    cursor: pointer;
}

.orders-load-more-button:disabled {
    color: #9096a1;
    cursor: wait;
}

/*
 * La barre de recherche collee au bas de l'ecran.
 *
 * Elle etait definie dans le gabarit de la liste des commandes : les fiches de
 * service client et leur historique, qui la portent aussi, se retrouvaient avec
 * une barre sans style, posee dans le flux et recouverte par le menu.
 */

/* Add padding to content to account for sticky search */
.orders-list-wrapper .order-prep-content,
.sav-page .order-prep-content,
.sav-history-page .order-prep-content {
    padding-bottom: 140px !important; /* Space for sticky search + bottom nav */
}

/* Sticky search container */
.order-prep-sticky-search {
    position: fixed !important;
    bottom: var(--order-prep-nav-total, 60px) !important; /* Above navigation bar, safe area iOS comprise */
    left: 0 !important;
    right: 0 !important;
    background-color: #ffffff !important;
    padding: 10px 15px !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 450 !important;
    border-top: 1px solid #e0e0e0 !important;
}

.sticky-search-form {
    max-width: 600px !important;
    margin: 0 auto !important;
}

/*
 * La barre de recherche.
 *
 * Une seule pilule pleine largeur contient le champ, la croix d'effacement et
 * le bouton. Le bouton se trouvait auparavant hors de la barre, dans
 * l'historique : les deux ecrans montraient une recherche differente, et le
 * champ, ampute de la largeur du bouton, coupait son propre texte d'invite.
 *
 * Cette definition est volontairement identique dans les deux ecrans.
 */
.search-icon {
    /* Posee dans le flux et non en absolu : elle etait calee sur un bord, et
       le champ devait lui menager sa place par un remplissage devine. */
    position: static !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    color: #8a8f98 !important;
    pointer-events: none !important;
}

.search-input-wrapper:focus-within .search-icon {
    color: var(--op-ink, #16181b) !important;
}

.search-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 4px 4px 16px !important;
    background: #f1f2f4 !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.search-input-wrapper:focus-within {
    background: #ffffff !important;
    border-color: var(--op-ink, #16181b) !important;
}

/*
 * Le champ.
 *
 * Le selecteur porte le conteneur pour passer devant deux regles plus fortes :
 * celle du theme de la boutique, qui impose son remplissage a tout
 * `input[type="text"]`, et celle d'`order-prep.css`, qui reservait 42 pixels a
 * gauche et 46 a droite pour la loupe et la croix du temps ou elles etaient
 * posees en absolu par-dessus le champ. Ici elles sont dans le flux et
 * occupent leur propre place : cette reserve ne faisait plus qu'eloigner le
 * texte de la loupe.
 */
.search-input-wrapper .sticky-search-input {
    flex: 1 1 auto !important;
    /* Sans min-width, un champ de formulaire refuse de descendre sous sa
       largeur par defaut et pousse le bouton hors de la pilule. */
    min-width: 0 !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 10px 0 !important;
    text-indent: 0 !important;
    /* Seize pixels au moins : en dessous, iOS agrandit la page a la saisie. */
    font-size: 16px !important;
    font-family: 'Open Sans', sans-serif !important;
    color: var(--op-ink, #16181b) !important;
    box-shadow: none !important;
}

.search-input-wrapper .sticky-search-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/*
 * La croix d'effacement.
 *
 * Elle ne parait qu'une fois le champ rempli, et par une classe plutot que par
 * un style pose sur la balise : la feuille tactile impose a cette croix un
 * « display » en !important, qui l'emportait sur le masquage et la laissait
 * visible sur un champ vide.
 *
 * Le decalage vertical hérité de l'ancienne disposition est annule : la croix
 * etait alors calee en absolu sur le bord du champ, et ce demi-tour la faisait
 * maintenant sortir de la pilule par le haut.
 */
.search-input-wrapper .search-clear-btn {
    display: none !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.search-input-wrapper .search-clear-btn.is-visible {
    display: inline-flex !important;
}

.search-input-wrapper .search-clear-btn:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: #333 !important;
}

.search-clear-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/*
 * Le choix du transporteur, au-dessus de la liste a preparer.
 *
 * On prepare rarement dans l'ordre d'arrivee : on sort d'abord tous les Mondial
 * Relay, puis tous les Colissimo, parce que les etiquettes s'impriment et se
 * deposent par transporteur.
 */
.orders-carrier-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #e9ebee;
    border-radius: 10px;
    background: #fbfbfc;
}

.orders-carrier-label {
    flex: 0 0 auto;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
}

.orders-carrier-select {
    flex: 1 1 auto;
    min-width: 0;
    /* Quarante-quatre pixels : la hauteur qu'un pouce atteint sans viser. */
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #d9dce1;
    border-radius: 8px;
    background: #ffffff;
    color: #16181b;
    /* Seize pixels au moins : en dessous, iOS agrandit la page a la selection. */
    font-size: 16px;
}

.orders-carrier-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/*
 * Les reglages, dans l'angle oppose a la deconnexion.
 *
 * Meme forme que celle-ci : deux boutons d'angle, l'un pour partir, l'autre pour
 * regler ce qui tient a cet appareil.
 */
.order-prep-settings-button {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Quarante-quatre pixels : la cible qu'un pouce atteint sans viser. */
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f5f6f8;
    color: #5b6068;
    text-decoration: none;
    transition: all 0.2s ease;
    z-index: 5;
}

.order-prep-settings-button:hover,
.order-prep-settings-button:focus {
    background: #e9ebee;
    color: #16181b;
}

/* Les deux reglages, en cartes, sur leur propre page. */
.settings-page .order-prep-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
    padding: 16px;
}

.settings-page .order-prep-locale-row,
.settings-page .order-prep-push-row {
    margin: 0;
    max-width: none;
    padding: 16px;
    border: 1px solid #e9ebee;
    border-radius: 12px;
    background: #ffffff;
}

/*
 * Le choix de la langue, sur l'accueil.
 *
 * Meme forme que le choix des notifications juste en dessous : deux reglages
 * d'appareil, qui se ressemblent parce qu'ils font la meme chose.
 */
.order-prep-locale-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 0;
    max-width: 420px;
}

.order-prep-locale-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
}

.order-prep-locale-select {
    flex: 1 1 auto;
    min-width: 0;
    /* Quarante-quatre pixels, la hauteur qu'un pouce atteint sans viser ; seize
       pixels de texte, en dessous desquels iOS agrandit la page. */
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #d9dce1;
    border-radius: 8px;
    background: #ffffff;
    color: #16181b;
    font-size: 16px;
}

.order-prep-locale-select:disabled {
    background: #f3f4f6;
    color: #9096a1;
}

/*
 * Autoriser les notifications, sur l'accueil.
 *
 * Le bouton porte son etat : allume, il devient discret ; refuse ou impossible,
 * il s'efface sans disparaitre, pour que le preparateur comprenne pourquoi il
 * ne recoit rien.
 */
.order-prep-push-row {
    margin: 18px auto 0;
    max-width: 420px;
    text-align: center;
}

.order-prep-push-button {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--op-ink, #16181b);
    border-radius: 999px;
    background: var(--op-ink, #16181b);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.order-prep-push-button[data-state="on"] {
    border-color: #b8ddc9;
    background: #e8f5ee;
    color: #1f6b43;
}

.order-prep-push-button:disabled {
    border-color: #d9dce1;
    background: #f3f4f6;
    color: #9096a1;
    cursor: not-allowed;
}

.order-prep-push-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
}

/*
 * Poser l'application sur l'ecran d'accueil.
 *
 * Trois marches a suivre, dont une seule est ouverte : celle de l'appareil qui
 * lit la page. Les listes sont numerotees et aerees parce qu'elles se suivent
 * un doigt sur l'ecran, souvent en tenant un autre telephone de l'autre main.
 */
.order-prep-install {
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid #e9ebee;
    border-radius: 14px;
    background: #ffffff;
}

.order-prep-install-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--op-ink, #16181b);
}

.order-prep-install-why,
.order-prep-install-done {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

.order-prep-install-done {
    padding: 10px 12px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 600;
}

.order-prep-install-steps {
    margin: 8px 0 0;
    padding: 10px 14px;
    border: 1px solid #eceef1;
    border-radius: 12px;
    background: #fbfbfc;
}

.order-prep-install-steps summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--op-ink, #16181b);
}

.order-prep-install-steps ol {
    /* Le rembourrage tient la place des numeros : sans lui ils sortent du cadre. */
    margin: 12px 0 0;
    padding-left: 22px;
}

.order-prep-install-steps li {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #374151;
}

.order-prep-install-note {
    margin: 12px 0 2px;
    padding-top: 10px;
    border-top: 1px solid #eceef1;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}

/* Le releve de l'appareil, replie tant qu'on n'en a pas besoin. */
.order-prep-diag {
    margin: 4px 0 0;
    padding: 12px 16px;
    border: 1px solid #e9ebee;
    border-radius: 12px;
    background: #fbfbfc;
    font-size: 13px;
    color: #6b7280;
}

.order-prep-diag summary {
    cursor: pointer;
    font-weight: 600;
    color: #4b5563;
}

.order-prep-diag pre {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: #374151;
}