/* ============================================================
   Social Media Order – Thème Rouge
   ============================================================ */

.smo-wrapper {
    margin-top: 20px;
    padding: 20px;
    border: 2px solid #fde8e8;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

.smo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f8d0d0;
}

.smo-icon { font-size: 20px; line-height: 1; }

.smo-title {
    font-size: 15px;
    font-weight: 700;
    color: #c0392b;
    letter-spacing: 0.3px;
    margin: 0;
}

.smo-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smo-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smo-field label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}

.smo-required { color: #e74c3c; margin-left: 2px; }

.smo-input {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid #f0c0c0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    -webkit-appearance: none;
    appearance: none;
}

.smo-input:focus {
    outline: none;
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10);
}

.smo-input::placeholder { color: #cbb; font-size: 13px; }

.smo-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    margin-top: 4px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.4px;
    line-height: 1.2;
}

.smo-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.4);
    color: #fff !important;
}

.smo-btn-submit:active { transform: translateY(0); }
.smo-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; }

.smo-note {
    font-size: 12px;
    color: #9a7a7a;
    text-align: center;
    margin: 4px 0 0;
    line-height: 1.5;
}

.smo-alert {
    padding: 11px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 10px;
}

.smo-success {
    background: #e8f8f0;
    border: 1.5px solid #2ecc71;
    color: #1a7a45;
}

.smo-error {
    background: #fef0f0;
    border: 1.5px solid #e74c3c;
    color: #b03020;
}

/* ============================================================
   Bouton "Commande rapide" – vert animé + vibration mobile
   ============================================================ */

@keyframes smo-bounce-in {
    0%   { opacity: 0; transform: scale(0.7); }
    70%  { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes smo-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(39,174,96,0.55); }
    60%  { box-shadow: 0 0 0 12px rgba(39,174,96,0); }
    100% { box-shadow: 0 0 0 0   rgba(39,174,96,0); }
}

@keyframes smo-vibrate {
    0%,100% { transform: translateX(0); }
    10%     { transform: translateX(-4px) rotate(-1deg); }
    20%     { transform: translateX( 4px) rotate( 1deg); }
    30%     { transform: translateX(-3px) rotate(-0.5deg); }
    40%     { transform: translateX( 3px) rotate( 0.5deg); }
    50%     { transform: translateX(-2px); }
    60%     { transform: translateX( 2px); }
    70%     { transform: translateX(-1px); }
    80%     { transform: translateX( 1px); }
    90%     { transform: translateX(0); }
}

@keyframes smo-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.smo-quick-order-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              9px;
    width:            100%;
    padding:          14px 22px;
    margin-bottom:    12px;
    box-sizing:       border-box;
    border:           none;
    border-radius:    50px;
    font-size:        16px;
    font-weight:      700;
    letter-spacing:   0.5px;
    cursor:           pointer;
    color:            #fff !important;

    /* dégradé vert avec effet shimmer */
    background:       linear-gradient(
                        100deg,
                        #1e8449 0%,
                        #27ae60 40%,
                        #52d98a 50%,
                        #27ae60 60%,
                        #1e8449 100%
                      );
    background-size:  200% auto;

    /* animations : apparition → pulse halo → vibration périodique */
    animation:
        smo-bounce-in  0.5s  ease         forwards,
        smo-pulse      2s    ease   0.6s  infinite,
        smo-shimmer    2.4s  linear 0.6s  infinite,
        smo-vibrate    0.45s ease   3s    infinite;

    transition:       filter 0.15s, transform 0.15s;

    /* ombre portée verte */
    box-shadow:       0 4px 18px rgba(39,174,96,0.40);

    /* touch tap sans délai */
    touch-action:     manipulation;
    -webkit-tap-highlight-color: transparent;
}

.smo-quick-order-btn:hover {
    filter:    brightness(1.08);
    transform: translateY(-2px);
    color:     #fff !important;
}

.smo-quick-order-btn:active {
    transform: scale(0.97);
    filter:    brightness(0.95);
}

.smo-quick-icon {
    font-size:   20px;
    line-height: 1;
    animation:   smo-vibrate 0.45s ease 3.1s infinite;
}

.smo-quick-label {
    line-height: 1;
}

/* ── Mobile : vibration plus prononcée ── */
@media (max-width: 768px) {
    .smo-quick-order-btn {
        font-size:  15px;
        padding:    13px 18px;
        animation:
            smo-bounce-in  0.5s  ease         forwards,
            smo-pulse      1.8s  ease   0.6s  infinite,
            smo-shimmer    2.2s  linear 0.6s  infinite,
            smo-vibrate    0.4s  ease   2.5s  infinite;
    }
}