/* ============================================================
   ORABELLAS - BASE / VARIABLES GLOBALES
   ============================================================ */

:root {
    /* ---- Paleta de colores ---- */
    --orabellas-primary:        #9B1C2E;
    --orabellas-primary-hover:  #7a1523;
    --orabellas-cream:         #F5EDD8;
    --orabellas-cream-light:   #FAF6F0;
    --orabellas-bg:            #f5f5f5;
    --orabellas-text:          #2C1A14;
    --orabellas-text-muted:    #2C1A14B2;
    --orabellas-text-secondary:#7A5A4A;
    --orabellas-text-dark:     #444244;
    --orabellas-white:         #FFFFFF;

    /* ---- Tipografía ---- */
    --orabellas-font:    "IBM Plex Serif", Sans-serif;

    /* ---- Bordes y radios ---- */
    --orabellas-radius:  10px;
    --orabellas-radius-lg: 20px;

    /* ---- Sombras ---- */
    --orabellas-shadow-card: 5px 5px 10px #AEAEC033, -5px -5px 10px #FFFFFF80;

    /* ---- Transiciones ---- */
    --orabellas-transition: all 0.3s ease;
}

/* ============================================================
   RESET GLOBAL
   ============================================================ */
* {
    font-family: var(--orabellas-font);
}

body {
    background: var(--orabellas-bg) !important;
}

/* ============================================================
   ESTILOS BASE PARA INPUTS Y SELECTS
   ============================================================ */
input,
select,
textarea {
    border: none;
    border-radius: var(--orabellas-radius) !important;
    font-weight: 400;
    font-size: 16px;
    background: var(--orabellas-white);
    transition: var(--orabellas-transition);
    box-sizing: border-box;
    font-family: var(--orabellas-font);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--orabellas-primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(155, 28, 46, 0.1);
}

/* ============================================================
   BOTÓN PRIMARIO
   ============================================================ */
.btn-orabellas-primary {
    background: var(--orabellas-primary);
    border: 1px solid var(--orabellas-cream);
    border-radius: var(--orabellas-radius);
    color: var(--orabellas-cream);
    transition: var(--orabellas-transition);
    cursor: pointer;
    font-family: var(--orabellas-font);
}

.btn-orabellas-primary:hover {
    background: var(--orabellas-cream);
    color: var(--orabellas-primary);
    border-color: var(--orabellas-primary);
}

/* ============================================================
   BOTÓN SECUNDARIO (outline invertido)
   ============================================================ */
.btn-orabellas-secondary {
    background: var(--orabellas-cream);
    border: 1px solid var(--orabellas-primary);
    border-radius: var(--orabellas-radius);
    color: var(--orabellas-primary);
    transition: var(--orabellas-transition);
    cursor: pointer;
    font-family: var(--orabellas-font);
}

.btn-orabellas-secondary:hover {
    background: var(--orabellas-primary);
    color: var(--orabellas-cream);
    border-color: var(--orabellas-cream);
}

/* ============================================================
   TARJETA ORABELLAS (neumórfica)
   ============================================================ */
.orabellas-card {
    background: var(--orabellas-bg);
    border-radius: var(--orabellas-radius-lg);
    border: 1px solid var(--orabellas-white);
    box-shadow: var(--orabellas-shadow-card);
}

/* ============================================================
   WOOCOMMERCE - Reset form-row pseudo-elementos
   ============================================================ */
.woocommerce form .form-row::after,
.woocommerce form .form-row::before,
.woocommerce-page form .form-row::after,
.woocommerce-page form .form-row::before {
    display: none !important;
}