/* Tarea 6 (doc33/doc51, ronda 2026-08-07): registro público multi-servicio, estilo "elegí tus
   servicios" (Netflix). Reusa la paleta ya definida en variables.css. */

.rms-wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 20px 80px;
}

/* Tarea 2d (ronda 2026-08-07): scrollbar modo oscuro (Firefox + WebKit/Chromium) -- por defecto el
   navegador dibuja la barra de scroll clara, que desentona fuerte con un fondo oscuro. */
html {
    scrollbar-color: rgba(0, 217, 217, .35) #0b0f1a;
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0f1a; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 217, 217, .35);
    border-radius: 999px;
    border: 2px solid #0b0f1a;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 217, 217, .55); }

/* Tarea 2d: botón fijo "volver al inicio" */
.rms-btn-volver {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(11, 16, 23, .85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--text-main, #fff);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    transition: all .2s ease;
}
.rms-btn-volver:hover {
    border-color: var(--cyan, #00d9d9);
    color: var(--cyan, #00d9d9);
}

@media (max-width: 480px) {
    .rms-btn-volver {
        top: 12px;
        left: 12px;
        padding: 6px 10px;
        font-size: .75rem;
    }
}

/* Selector de idioma ES/EN (ronda 2026-08-11) -- mismo componente .lang-switch/.lang-btn de
   CSS/general-page.css (registro.php no comparte esa hoja de estilos, así que se replica acá con
   los mismos valores), fijo en la esquina opuesta a "Volver al inicio". */
.rms-lang-switch {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10001;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(11, 16, 23, .85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .12);
}

.lang-btn {
    border: none;
    background: transparent;
    color: var(--text-main, #fff);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: .2s;
}

.lang-btn:hover { color: var(--cyan, #00d9d9); }

.lang-btn.active {
    background: var(--cyan, #00d9d9);
    color: #06222a;
}

@media (max-width: 480px) {
    .rms-lang-switch {
        top: 12px;
        right: 12px;
    }
}

/* Tarea 2a (ronda 2026-08-07): layout de 2 columnas -- contenido principal + carrito fijo (sticky)
   al costado, en vez de una tarjeta más dentro del flujo vertical. En mobile colapsa a 1 columna
   (el sticky no tiene sentido con poco espacio vertical disponible). */
.rms-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}
.rms-main { min-width: 0; }

.rms-sidebar-carrito {
    position: sticky;
    top: 20px;
}
.rms-sidebar-carrito .rms-carrito { margin-bottom: 0; }

@media (max-width: 900px) {
    .rms-layout { grid-template-columns: 1fr; }
    .rms-sidebar-carrito { position: static; }
}

.rms-hero { text-align: center; margin-bottom: 32px; }
/* Tarea 2c (ronda 2026-08-07): logo centrado arriba del nombre, mismo lockup que ya usa expo.php. */
.rms-hero .logo-AurellConnect { display: flex; justify-content: center; margin-bottom: 18px; }
.rms-hero .logo-AurellConnect img { width: 90px; height: auto; }
.rms-hero .hero-badge {
    display: inline-block;
    background: rgba(0, 217, 217, .12);
    color: var(--cyan, #00d9d9);
    border: 1px solid rgba(0, 217, 217, .3);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: .75rem;
    margin-bottom: 14px;
}
.rms-hero h1 { font-size: 2rem; color: var(--text-main, #fff); margin-bottom: 10px; }
.rms-hero .title-first { display: block; font-size: 1.1rem; font-weight: 400; color: var(--text-gray, #b0b3b8); }
.rms-hero .cyan-accent { color: var(--cyan, #00d9d9); }
.rms-hero .register-subtitle { color: var(--text-gray, #b0b3b8); max-width: 560px; margin: 0 auto; }

.rms-card {
    background: var(--card, #0b1017);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 26px;
    margin-bottom: 22px;
}
.rms-card h4 { color: var(--text-main, #fff); font-size: 1.15rem; margin-bottom: 6px; }
.rms-card-sub { color: var(--text-gray, #b0b3b8); font-size: .85rem; margin-bottom: 18px; }
.rms-card label { color: var(--text-gray, #b0b3b8); font-size: .8rem; margin-bottom: 4px; display: block; }
.rms-card .form-control, .rms-card .form-select {
    background: var(--card-2, #111927);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--text-main, #fff);
}

/* ---------- Paquetes ---------- */
.rms-paquetes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.rms-paquete-card {
    position: relative;
    background: linear-gradient(160deg, rgba(0, 217, 217, .08), rgba(0, 217, 217, .02));
    border: 1px solid rgba(0, 217, 217, .25);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, border-color .15s ease;
}
.rms-paquete-card:hover { transform: translateY(-3px); border-color: var(--cyan, #00d9d9); }
.rms-paquete-card.rms-elegido { border-color: var(--cyan, #00d9d9); box-shadow: 0 0 0 2px rgba(0, 217, 217, .35); }
.rms-paquete-badge {
    align-self: flex-start;
    background: var(--cyan, #00d9d9);
    color: #06222a;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: 10px;
}
.rms-paquete-card h5 { color: var(--text-main, #fff); margin-bottom: 6px; }
.rms-paquete-desc { color: var(--text-gray, #b0b3b8); font-size: .8rem; margin-bottom: 10px; }
.rms-paquete-incluye { list-style: none; padding: 0; margin: 0 0 14px; font-size: .82rem; color: var(--text-main, #fff); flex-grow: 1; }
.rms-paquete-incluye li { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rms-paquete-incluye i { color: var(--success, #00e676); }
.rms-paquete-incluye small { color: var(--text-gray, #b0b3b8); }
.rms-paquete-precio { font-size: 1.2rem; font-weight: 700; color: var(--text-main, #fff); margin-bottom: 12px; }
.rms-paquete-precio span { font-size: .72rem; font-weight: 400; color: var(--text-gray, #b0b3b8); }

/* ---------- Explorador de planes: pestañas por servicio + "Packs" + flechas + filtro
   de duración (doc115, 2026-08-18) ----------
   Antes, paquetes y servicios se apilaban todos juntos en la página (con el catálogo real
   de ronda27/81 eso son ~18 tarjetas de paquete + ~9 grupos de servicio con sus planes, una
   página larguísima). Ahora conviven en un único carrusel: solo un panel visible a la vez
   (Packs o un servicio puntual), navegable con las flechas o tocando directamente una pestaña,
   más un filtro de duración que oculta tarjetas sin tener que volver a pedir nada al servidor. */
.rms-explorador-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.rms-explorador-flecha {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--card-2, #111927);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--text-main, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: border-color .15s ease, color .15s ease;
}
.rms-explorador-flecha:hover {
    border-color: var(--cyan, #00d9d9);
    color: var(--cyan, #00d9d9);
}

.rms-explorador-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
    padding-bottom: 2px;
    /* Pulido (ronda 2026-08-18): el scroll sigue siendo real -- scrollIntoView() lo necesita
       para centrar la pestaña activa -- pero la barra visual queda oculta a propósito. La
       navegación tiene que sentirse como que solo las flechas mueven las pestañas, sin una
       barra de scroll visible/arrastrable al costado. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rms-explorador-tabs::-webkit-scrollbar { display: none; }

.rms-explorador-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card-2, #111927);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--text-gray, #b0b3b8);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.rms-explorador-tab i { color: inherit; font-size: .95rem; }
.rms-explorador-tab:hover { border-color: var(--cyan, #00d9d9); color: var(--text-main, #fff); }
.rms-explorador-tab.active {
    background: var(--cyan, #00d9d9);
    border-color: var(--cyan, #00d9d9);
    color: #06222a;
    font-weight: 700;
}

.rms-explorador-filtro {
    display: inline-flex;
    gap: 4px;
    background: var(--card-2, #111927);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 20px;
}

.rms-filtro-duracion {
    background: transparent;
    border: none;
    color: var(--text-gray, #b0b3b8);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.rms-filtro-duracion:hover { color: var(--text-main, #fff); }
.rms-filtro-duracion.active { background: var(--cyan, #00d9d9); color: #06222a; }

.rms-explorador-panel { display: none; }
.rms-explorador-panel.active { display: block; }

.rms-explorador-sin-resultado {
    display: none;
    color: var(--text-gray, #b0b3b8);
    font-size: .85rem;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}
.rms-explorador-sin-resultado.rms-visible { display: block; }

@media (max-width: 640px) {
    .rms-explorador-flecha {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .rms-explorador-tab {
        padding: 13px 14px;
        font-size: .8rem;
    }
    .rms-filtro-duracion {
        padding: 12px 12px;
        flex: 1;
        text-align: center;
    }
    .rms-explorador-filtro { width: 100%; }
}

/* ---------- Servicios individuales (dentro de un panel del explorador, ver más abajo) ---------- */
.rms-servicio-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rms-servicio-head i { color: var(--cyan, #00d9d9); font-size: 1.2rem; }
.rms-servicio-head h5 { color: var(--text-main, #fff); margin: 0; }
.rms-servicio-desc { color: var(--text-gray, #b0b3b8); font-size: .8rem; margin-bottom: 12px; }

.rms-planes-fila {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.rms-plan-card {
    background: var(--card-2, #111927);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}
.rms-plan-card:hover { transform: translateY(-2px); border-color: var(--cyan, #00d9d9); }
.rms-plan-card.rms-elegido { border-color: var(--cyan, #00d9d9); box-shadow: 0 0 0 2px rgba(0, 217, 217, .3); }
.rms-plan-card h6 { color: var(--text-main, #fff); font-size: .85rem; margin-bottom: 6px; }
.rms-plan-precio { color: var(--cyan, #00d9d9); font-weight: 700; font-size: .95rem; }
.rms-plan-detalle { color: var(--text-gray, #b0b3b8); font-size: .68rem; margin: 4px 0 10px; }

.rms-btn-elegir {
    width: 100%;
    background: transparent;
    border: 1px solid var(--cyan, #00d9d9);
    color: var(--cyan, #00d9d9);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .82rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.rms-btn-elegir:hover { background: var(--cyan, #00d9d9); color: #06222a; }
.rms-btn-elegir-sm { padding: 6px 8px; font-size: .74rem; }
.rms-elegido .rms-btn-elegir { background: var(--cyan, #00d9d9); color: #06222a; }

/* ---------- Paginación de la grilla de planes/paquetes (pulido, ronda 2026-08-18) ----------
   Antes la grilla de un panel crecía sin techo (todas las filas apiladas, altura libre). Ahora
   en desktop se muestran solo un puñado de filas por "página" (JS agrupa las tarjetas realmente
   renderizadas por su offsetTop, sin asumir cuántas columnas entran por fila -- eso ya lo decide
   el propio auto-fill del grid) con flechas propias a los costados (mismo estilo que
   .rms-explorador-flecha). En mobile (<640px) la paginación por JS se desactiva del todo y la
   grilla pasa a ser un carrusel de scroll horizontal táctil nativo con scroll-snap. */
.rms-grid-paginado {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rms-grid-paginado-viewport {
    flex: 1;
    min-width: 0;
}
.rms-grid-flecha {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--card-2, #111927);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--text-main, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.rms-grid-flecha:hover:not(:disabled) { border-color: var(--cyan, #00d9d9); color: var(--cyan, #00d9d9); }
.rms-grid-flecha:disabled { opacity: .3; cursor: default; }

.rms-plan-card.rms-oculto-filtro, .rms-plan-card.rms-oculto-pagina,
.rms-paquete-card.rms-oculto-filtro, .rms-paquete-card.rms-oculto-pagina {
    display: none;
}

@media (max-width: 640px) {
    /* Carrusel táctil: nada se oculta por página acá (la paginación por JS se desactiva sola,
       ver registro.php), el usuario desliza con el dedo. El filtro de duración sigue aplicando
       normalmente (rms-oculto-filtro no se toca en este media query). */
    .rms-grid-flecha { display: none; }
    .rms-planes-fila, .rms-paquetes-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 10px;
        padding-bottom: 4px;
    }
    .rms-planes-fila::-webkit-scrollbar, .rms-paquetes-grid::-webkit-scrollbar { display: none; }
    .rms-plan-card, .rms-paquete-card { scroll-snap-align: start; flex: 0 0 auto; }
    .rms-plan-card { width: 44vw; min-width: 140px; }
    .rms-paquete-card { width: 78vw; min-width: 230px; }
}

.rms-sin-planes {
    background: rgba(255, 255, 255, .03);
    border: 1px dashed rgba(255, 255, 255, .15);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.rms-sin-planes p { color: var(--text-gray, #b0b3b8); font-size: .82rem; margin-bottom: 10px; }
.rms-cta-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #25d366;
    color: #05320f;
    font-weight: 600;
    font-size: .8rem;
    border-radius: 999px;
    padding: 6px 14px;
    text-decoration: none;
}
.rms-cta-whatsapp:hover { filter: brightness(1.05); }

/* ---------- Carrito ---------- */
.rms-carrito { border-color: rgba(0, 217, 217, .35); }
.rms-carrito-vacio { color: var(--text-gray, #b0b3b8); font-size: .85rem; }
.rms-carrito-lista { list-style: none; padding: 0; margin: 0 0 14px; }
.rms-carrito-lista li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--text-main, #fff);
    font-size: .88rem;
}
.rms-quitar {
    background: none;
    border: none;
    color: var(--danger, #ff5252);
    font-size: 1rem;
    cursor: pointer;
    margin-left: 8px;
    line-height: 1;
}
.rms-carrito-total { text-align: right; color: var(--text-main, #fff); font-size: 1rem; }
.rms-carrito-total strong { color: var(--cyan, #00d9d9); font-size: 1.3rem; }

@media (max-width: 640px) {
    .rms-wrapper { padding: 24px 14px 60px; }
    .rms-hero h1 { font-size: 1.5rem; }
    .rms-card { padding: 18px; }
    /* .rms-paquetes-grid / .rms-planes-fila: el ancho de tarjeta en mobile ya lo define el
       bloque de carrusel táctil más arriba (display:flex + width en vw) -- acá ya no aplica
       grid-template-columns (pulido, ronda 2026-08-18, ver doc de esta ronda). */
    .cf-turnstile { max-width: 100%; overflow: hidden; }
}

/* ---------- Toasts (Tarea 2b, ronda 2026-08-07) ---------- */
.rms-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 40px));
}

.rms-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--card, #0b1017);
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 4px solid var(--cyan, #00d9d9);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text-main, #fff);
    font-size: .88rem;
    line-height: 1.4;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .25s ease, transform .25s ease;
}

.rms-toast-show { opacity: 1; transform: translateX(0); }

.rms-toast-error { border-left-color: var(--danger, #ff5252); }
.rms-toast-success { border-left-color: var(--success, #00e676); }

.rms-toast-icono { flex-shrink: 0; font-weight: 700; }
.rms-toast-error .rms-toast-icono { color: var(--danger, #ff5252); }
.rms-toast-success .rms-toast-icono { color: var(--success, #00e676); }
.rms-toast-info .rms-toast-icono { color: var(--cyan, #00d9d9); }

@media (max-width: 480px) {
    .rms-toast-container { left: 14px; right: 14px; top: 14px; max-width: none; }
}

.rms-legal-check {
    margin: 4px 0 14px;
    font-size: 13.5px;
    color: var(--text-soft, #a6b0c3);
    line-height: 1.6;
}

.rms-legal-check label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.rms-legal-check input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--cyan, #00d9d9);
    flex-shrink: 0;
}

.rms-legal-check a {
    color: var(--cyan, #00d9d9);
    text-decoration: none;
}

.rms-legal-check a:hover {
    text-decoration: underline;
}

/* ---------- Código de beneficio (doc114, 2026-08-15/16; fix visual doc115) ----------
   Bug real: el botón "Aplicar" heredaba `width:100%` de `.rms-btn-elegir` (pensado para
   botones de ancho completo dentro de una card de plan), así que dentro de esta fila flex
   se comía casi todo el ancho disponible y dejaba al input comprimido a una tira vacía --
   la "caja angosta a la izquierda" reportada. Ahora el botón tiene su propia clase
   (`rms-beneficio-btn-aplicar`), sin ese `width:100%` de fondo, y el input pasa a ser un
   verdadero "icon input" (ícono de regalo dentro, no solo en el título de la sección). */
.rms-beneficio-fila {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.rms-beneficio-inputwrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.rms-beneficio-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cyan, #00d9d9);
    font-size: 1rem;
    pointer-events: none;
}

.rms-beneficio-fila .rms-beneficio-input.form-control {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    text-transform: uppercase;
    border-radius: 10px;
    background: var(--card-2, #111927);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--text-main, #fff);
}

.rms-beneficio-fila .rms-beneficio-input.form-control::placeholder {
    text-transform: none;
    color: var(--text-gray, #b0b3b8);
}

.rms-beneficio-fila .rms-beneficio-input.form-control:focus {
    outline: none;
    border-color: var(--cyan, #00d9d9);
    box-shadow: 0 0 0 3px rgba(0, 217, 217, .18);
}

.rms-beneficio-btn-aplicar {
    flex: 0 0 auto;
    width: auto;
    height: 44px;
    padding: 0 22px;
    background: transparent;
    border: 1px solid var(--cyan, #00d9d9);
    color: var(--cyan, #00d9d9);
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.rms-beneficio-btn-aplicar:hover:not(:disabled) {
    background: var(--cyan, #00d9d9);
    color: #06222a;
}

.rms-beneficio-btn-aplicar:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.rms-beneficio-resultado:empty {
    display: none;
}

.rms-beneficio-ok,
.rms-beneficio-error {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.rms-beneficio-ok {
    background: var(--cyan-soft, rgba(0,217,217,.15));
    border: 1px solid var(--cyan, #00d9d9);
    color: var(--text, #fff);
}

.rms-beneficio-ok i {
    color: var(--success, #00e676);
    margin-right: 6px;
}

.rms-beneficio-ok ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.rms-beneficio-error {
    background: rgba(255, 82, 82, .12);
    border: 1px solid var(--danger, #ff5252);
    color: var(--text, #fff);
}

.rms-carrito-beneficio-linea {
    border-top: 1px dashed var(--cyan, #00d9d9);
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 600;
}

.rms-carrito-beneficio-linea i {
    color: var(--cyan, #00d9d9);
    margin-right: 4px;
}