/* ==========================================================================
   Sylcodehub — supplemental styles
   These fill in the few utility/component rules the original theme generated
   outside its compiled styles.css (header button fills, feature icon sizing,
   page-header band, terms layout helpers). The bulk of the design lives in
   styles.css (the theme's compiled framework).
   ========================================================================== */

/* ---- Header logo (smaller + responsive) ---- */
.header .container .logo a img.header-logo,
.header .container .logo img.header-logo {
    width: auto;
    height: 52px;
    max-width: 100%;
    display: block;
}
@media (max-width: 1024px) { .header .container .logo img.header-logo { height: 46px; } }
@media (max-width: 600px)  { .header .container .logo img.header-logo { height: 40px; } }

/* ---- Header login / signup buttons ---- */
.header .container .header-buttons .btn,
.header-buttons .btn {
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
/* show the login/sign-up buttons only on desktop; the theme swaps to a
   hamburger menu at <=1024px (matches the original theme behaviour). */
@media (min-width: 1025px) {
    .header .container .header-buttons .btn,
    .header-buttons .btn { display: flex; }
}
.header .container .header-buttons .btn.active-btn,
.header-buttons .btn.active-btn {
    background: var(--color-primary);
    color: var(--color-white);
}
.header .container .header-buttons .signup,
.header-buttons .signup {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.header .container .header-buttons .btn:hover {
    box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, .08), 0px 4px 4px 0px rgba(51, 51, 51, .04);
    transform: translateY(-0.1rem);
    transition: all .25s ease-in-out;
}

/* language selector spacing in the header */
.header .container .header-buttons .language-selector { display: flex; align-items: center; }
.header .container .header-buttons .lang-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--text-font-size); font-weight: 600; color: var(--color-black);
}
.header .container .header-buttons .lang-toggle .lang-flag { width: 24px; height: auto; border-radius: 2px; }

/* language dropdown (hidden until toggled) */
.header .container .header-buttons .language-selector { position: relative; display: inline-block; }
.header .container .header-buttons .lang-dropdown {
    position: absolute; top: 46px; right: 0; width: 180px; background: #fff;
    border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); padding: 8px;
    z-index: 100000; opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.header .container .header-buttons .lang-dropdown.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.header .container .header-buttons .lang-dropdown::before {
    content: ''; position: absolute; top: -10px; right: 20px; border: 6px solid transparent; border-bottom-color: #fff;
}
.header .container .header-buttons .lang-dropdown .lang-button {
    display: flex; align-items: center; padding: 8px 10px; text-decoration: none; color: #000; border-radius: 8px;
}
.header .container .header-buttons .lang-dropdown .lang-button:hover,
.header .container .header-buttons .lang-dropdown .lang-active { background: #f1f1f1; }
.header .container .header-buttons .lang-dropdown .lang-text { font-size: 16px; font-weight: 500; }

/* ---- Feature card icons (no rounded icon-container in this design) ---- */
.features .features-container .feature .feature-container .icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    padding: 0;
}

/* keep the three top features on a single row at desktop widths (matches design) */
@media (min-width: 1025px) {
    .features .features-container .feature { flex: 1 1 0; max-width: none; }
}

/* ---- Page header band (no-hero-header) ---- */
.no-hero-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 56px 16px;
}
.no-hero-header .no-hero-title-wrapper { text-align: center; }
.no-hero-header .no-hero-title-wrapper h1 {
    color: var(--color-black);
    font-size: var(--title-xl-font-size);
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -0.96px;
    text-align: center;
}
@media (max-width: 767px) {
    .no-hero-header .no-hero-title-wrapper h1 { font-size: var(--title-mob-font-size); line-height: 40px; }
}

/* ---- Generic page article spacing ---- */
.page-article { width: 100%; }
.main-container { width: 100%; }

/* prose-style brand heading helper used on policy pages */
.prose-h1\:text-brand h1 { color: var(--color-primary); }

/* ==========================================================================
   Cancel subscription page
   ========================================================================== */
.cancel-subscription-section {
    display: flex;
    justify-content: center;
    padding: 80px 16px 120px;
}
.cancel-card {
    width: 100%;
    max-width: 640px;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, .08), 0px 4px 4px 0px rgba(51, 51, 51, .04);
    padding: 48px 40px;
}
.cancel-card h2 {
    text-align: center;
    color: var(--color-black);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 34px;
    margin-bottom: 32px;
}
.cancel-card .field { margin-bottom: 22px; }
.cancel-card label {
    display: block;
    font-weight: 600;
    color: var(--color-black);
    margin-bottom: 8px;
    font-size: var(--text-sm-font-size);
}
.cancel-card input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: var(--text-font-size);
    color: var(--color-black);
    background: var(--color-white);
}
.cancel-card input::placeholder { color: #98a2b3; }
.cancel-card .button { width: 100%; margin-top: 10px; text-align: center; }

/* ==========================================================================
   Contact form (built from blueprint markup statically)
   ========================================================================== */
.contact-inner { display: flex; gap: 64px; padding: 80px 16px; align-items: stretch; flex-wrap: wrap; }
.contact-inner .email-section { flex: 1 1 460px; }
.contact-inner .email-section .text-content h3 {
    color: var(--color-black); font-size: var(--title-md-font-size); font-weight: 700; margin-bottom: 10px;
}
.contact-inner .email-section .text-content p { color: var(--color-mute-1); margin-bottom: 32px; }
.contact-form .form-row { display: flex; gap: 20px; flex-wrap: wrap; }
.contact-form .form-group { margin-bottom: 20px; flex: 1 1 200px; }
.contact-form label { display: block; font-weight: 600; color: var(--color-black); margin-bottom: 8px; font-size: var(--text-sm-font-size); }
.contact-form input,
.contact-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid #d0d5dd; border-radius: 8px;
    font-size: var(--text-font-size); color: var(--color-black); background: var(--color-white); font-family: var(--default-font);
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #98a2b3; }
.contact-form .recaptcha-box {
    display: flex; align-items: center; gap: 12px; justify-content: space-between;
    width: 304px; max-width: 100%; border: 1px solid #d3d3d3; border-radius: 3px;
    background: #f9f9f9; padding: 14px 12px; margin: 6px 0 24px;
}
.contact-form .recaptcha-box .rc-left { display: flex; align-items: center; gap: 12px; }
.contact-form .recaptcha-box .rc-check { width: 24px; height: 24px; border: 2px solid #c1c1c1; border-radius: 2px; background: #fff; }
.contact-form .recaptcha-box .rc-logo { text-align: center; font-size: 10px; color: #9aa0a6; line-height: 1.2; }
.contact-form .recaptcha-box .rc-logo .rc-icon { font-size: 22px; color: #4a90d9; }
.contact-form .button { width: 100%; text-align: center; font-size: var(--title-font-size); padding: 16px 40px; font-weight: 600; }

.contact-inner .contact-section {
    flex: 1 1 460px;
    background: var(--color-primary);
    border-radius: 20px;
    padding: 56px 48px;
    color: var(--color-white);
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.contact-inner .contact-section p { color: var(--color-white); margin: 10px 0; line-height: 1.5; }
.contact-inner .contact-section p b { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.contact-inner .contact-section a { color: var(--color-white); text-decoration: none; }

@media (max-width: 900px) {
    .contact-inner { gap: 40px; padding: 48px 10px; }
}

/* ==========================================================================
   Internal pages: login, profile, orders, change-password, unsubscribe, dashboard
   (the theme styles their containers; these rules style the form fields, which
    the compiled framework leaves border-less by default)
   ========================================================================== */
.form-login-wrapper, .content-section-profile, .content-section.change-password-form,
.unsubscribe, .unsubscribe-form { width: 100%; }

.form-login-wrapper .form-field,
.content-section-profile .form-field,
.change-password-form .form-field,
.unsubscribe .form-field { margin-bottom: 18px; }

.form-login-wrapper .form-label label,
.content-section-profile .form-label label,
.change-password-form .form-label label,
.unsubscribe .form-label label {
    display: block; font-weight: 600; color: var(--color-black);
    margin-bottom: 8px; font-size: var(--text-sm-font-size);
}
.form-label .required { color: #e23; margin-left: 2px; }

.form-login-wrapper input.form-input,
.content-section-profile input.form-input,
.change-password-form input.form-input,
.unsubscribe input.form-input,
.form-login-wrapper input[type=text],
.form-login-wrapper input[type=email],
.form-login-wrapper input[type=password] {
    width: 100%; padding: 12px 14px; border: 1px solid #d0d5dd; border-radius: 8px;
    background: var(--color-white); color: var(--color-black);
    font-size: var(--text-font-size); margin-bottom: 0; display: block;
}
.form-login-wrapper input::placeholder,
.content-section-profile input::placeholder,
.unsubscribe input::placeholder { color: #98a2b3; }

/* login form */
.login { width: 100%; }
.form-login-wrapper #grav-login { max-width: 460px; margin: 0 auto; }
.form-login-wrapper #grav-login h4 { text-align: center; }
.form-login-wrapper .form-actions { text-align: center; margin-top: 8px; }
.form-login-wrapper .button.primary {
    display: inline-block; background: var(--color-primary); color: #fff; border: none;
    padding: 12px 32px; border-radius: 8px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.form-login-wrapper .button.secondary {
    display: inline-block; background: transparent !important; background-color: transparent !important;
    color: var(--color-primary); text-decoration: none; padding: 10px; font-weight: 600; border: none; box-shadow: none;
}
.form-login-wrapper .button.secondary:hover { text-decoration: underline; transform: none; box-shadow: none; }
.form-login-wrapper .rememberme { margin: 18px 0; }
.form-login-wrapper .rememberme label { display: inline-block; margin-left: 6px; }
.form-login-wrapper .form-action-wrapper { text-align: center; margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* profile */
.profile-card {
    max-width: 1270px; margin: 0 auto 75px; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.08); padding: 48px;
}
.profile-card .my-orders-row { margin-bottom: 32px; }
.btn__simple.my-orders { color: var(--color-primary); font-weight: 600; text-decoration: none; font-size: var(--text-md-font-size); }
.content-section-profile h2 { font-size: 2rem; font-weight: 700; color: var(--color-primary); margin-bottom: 24px; }
.content-section-profile .button.primary {
    display: inline-block; background: var(--color-primary); color: #fff; border: none;
    padding: 12px 28px; border-radius: 8px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.content-section-profile .form-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.content-section-profile .button.danger { background: #d92d20 !important; }
.subscription-info { display: flex; flex-direction: column; gap: 12px; }
.subscription-info .sub-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee; }
.subscription-info .sub-row b { color: var(--color-black); }

/* orders table */
.orders-table-wrapper { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.08); padding: 32px; }
.orders-table-wrapper table { width: 100%; border-collapse: collapse; }
.orders-table-wrapper table .btn { color: var(--color-primary); white-space: nowrap; }
.orders-table-wrapper table .btn i { margin-right: 4px; }

/* unsubscribe (theme .unsubscribe card) */
.unsubscribe-section { padding: 40px 16px 96px; }
.unsubscribe .unsubscribe-title { font-size: 1.5rem; text-align: center; margin-bottom: 24px; font-weight: 700; color: var(--color-black); }
.unsubscribe .form-actions { text-align: center; margin-top: 24px; }
.unsubscribe .button { display: inline-block; background: var(--color-primary); color: #fff; border: none; padding: 14px 40px; border-radius: 8px; font-weight: 600; cursor: pointer; }

/* dashboard placeholder */
.dashboard-content {
    width: 100%; min-height: 70vh; border: 1px solid rgba(128,128,128,.25); border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: #f7f9fc; color: var(--color-mute-1); text-align: center; padding: 40px;
}
.dashboard-content .di { font-size: 48px; color: var(--color-primary); }

/* single pricing card: shrink the price so €29.99 fits the card width */
.pricings .pricings-container .pricing .pricing-content .price .pricing-wrap .price,
.pricings .pricings-container .pricing .pricing-content .price .pricing-wrap .price h1 {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -1px;
}
.pricings .pricings-container .pricing { align-self: center; }

/* ==========================================================================
   Mobile gutters — keep content off the screen edges on small viewports
   ========================================================================== */
@media (max-width: 767px) {
    .profile-card { margin-left: 16px; margin-right: 16px; padding: 24px 18px; }
    .orders-table-wrapper { margin-left: 16px; margin-right: 16px; padding: 18px; }
    .policy-article { padding-left: 16px; padding-right: 16px; }
    .content-section-profile { padding-left: 0; padding-right: 0; }
    .cancel-subscription-section,
    .unsubscribe-section { padding-left: 16px; padding-right: 16px; }
    .pricings .pricings-container { padding: 0 16px; }
    .pricings .pricings-container .pricing { max-width: 100%; flex-basis: 100%; }
    .dashboard-content { margin-left: 0; }
}