/* ==========================================================================
   AFAQ PROJECT OWNER - SELECT SERVICES
   Path: assets/css/project-owner/select-services.css
   Scope: html body .afaq-app.afaq-owner-select-services-page
   Version: select-services-royal-v1.0
   ========================================================================== */

/* ==========================================================================
   00) HARD SCOPE / LOCAL TOKENS
   ========================================================================== */
html body .afaq-app.afaq-owner-select-services-page,
html body .afaq-app.afaq-owner-select-services-page *,
html body .afaq-app.afaq-owner-select-services-page *::before,
html body .afaq-app.afaq-owner-select-services-page *::after {
    box-sizing: border-box !important;
}

html body .afaq-app.afaq-owner-select-services-page {
    --ss-white: #ffffff;
    --ss-paper: #fffdf8;
    --ss-cream: #fff7eb;
    --ss-soft: #f7f9fc;
    --ss-soft-2: #f1f4f8;
    --ss-title: #071321;
    --ss-text: #101827;
    --ss-muted: #667085;
    --ss-muted-2: #7b8794;
    --ss-gold: #c08c47;
    --ss-gold-2: #d9a15a;
    --ss-gold-3: #f4d6a8;
    --ss-green: #178650;
    --ss-green-soft: #ecfff5;
    --ss-red: #c94343;
    --ss-red-soft: #fff2f2;
    --ss-blue: #245d99;
    --ss-blue-soft: #f1f7ff;
    --ss-border: rgba(15, 31, 50, .085);
    --ss-border-2: rgba(15, 31, 50, .135);
    --ss-border-gold: rgba(192, 140, 71, .25);
    --ss-shadow-xs: 0 5px 14px rgba(7, 19, 33, .035);
    --ss-shadow-sm: 0 12px 30px rgba(7, 19, 33, .060);
    --ss-shadow-md: 0 22px 58px rgba(7, 19, 33, .095);
    --ss-shadow-gold: 0 18px 42px rgba(192, 140, 71, .18);
    --ss-radius-xl: 32px;
    --ss-radius-lg: 25px;
    --ss-radius-md: 18px;
    --ss-radius-sm: 12px;
    --ss-transition: .22s cubic-bezier(.2,.7,.2,1);
    --ss-font: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif;
    --ss-sidebar: var(--afaq-sidebar, 270px);

    width: 100% !important;
    min-height: 100svh !important;
    direction: rtl !important;
    isolation: isolate !important;
    overflow-x: hidden !important;
    color: var(--ss-text) !important;
    font-family: var(--ss-font) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(192, 140, 71, .13), transparent 30%),
        radial-gradient(circle at 96% 12%, rgba(7, 19, 33, .035), transparent 34%),
        linear-gradient(180deg, #fffaf2 0%, #ffffff 42%, #f7f9fc 100%) !important;
}

html body .afaq-owner-select-services-page :where(p,h1,h2,h3,h4,h5,h6,figure,ul,ol) {
    margin-top: 0 !important;
}

html body .afaq-owner-select-services-page :where(a,button,input,textarea,select,label) {
    font-family: var(--ss-font) !important;
}

html body .afaq-owner-select-services-page a {
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html body .afaq-owner-select-services-page img {
    max-width: 100% !important;
    height: auto !important;
}

html body .afaq-owner-select-services-page .dashicons,
html body .afaq-owner-select-services-page .dashicons-before::before {
    font-family: dashicons !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

html body .entry-content > .afaq-app.afaq-owner-select-services-page,
html body .wp-block-post-content > .afaq-app.afaq-owner-select-services-page,
html body .site-main .afaq-app.afaq-owner-select-services-page,
html body .content-area .afaq-app.afaq-owner-select-services-page,
html body .elementor-widget-container > .afaq-app.afaq-owner-select-services-page,
html body .elementor-shortcode > .afaq-app.afaq-owner-select-services-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   01) PAGE FRAME
   ========================================================================== */
html body .afaq-owner-select-services-page .afaq-main {
    min-width: 0 !important;
    color: var(--ss-text) !important;
    background: transparent !important;
}

html body .afaq-owner-select-services-page .afaq-main:not(.afaq-main--standalone) {
    width: calc(100% - var(--ss-sidebar)) !important;
    margin-right: var(--ss-sidebar) !important;
}

html body .afaq-owner-select-services-page .afaq-main--standalone {
    width: 100% !important;
    margin-right: 0 !important;
}

html body .afaq-owner-select-services-page .afaq-content,
html body .afaq-owner-select-services-page .afaq-content--dashboard {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 18px 48px !important;
    color: var(--ss-text) !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   02) TOPBAR / MOBILE TOGGLE
   ========================================================================== */
html body .afaq-owner-select-services-page .afaq-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    width: 100% !important;
    padding: 12px 18px 7px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78), transparent) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html body.admin-bar .afaq-owner-select-services-page .afaq-topbar {
    top: 32px !important;
}

html body .afaq-owner-select-services-page .afaq-topbar__content {
    position: relative !important;
    overflow: hidden !important;
    min-height: 84px !important;
    border-radius: 26px !important;
    padding: 15px 17px !important;
    border: 1px solid rgba(15, 31, 50, .080) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(192, 140, 71, .13), transparent 35%),
        linear-gradient(135deg, rgba(255,255,255,.99), rgba(255,250,242,.96)) !important;
    box-shadow: 0 15px 38px rgba(7, 19, 33, .070) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 12px !important;
}

html body .afaq-owner-select-services-page .afaq-page-title h1,
html body .afaq-owner-select-services-page .afaq-page-title strong {
    margin: 5px 0 0 !important;
    color: var(--ss-title) !important;
    font-size: clamp(23px, 1.85vw, 36px) !important;
    line-height: 1.14 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    -webkit-text-fill-color: currentColor !important;
}

html body .afaq-owner-select-services-page .afaq-page-title p,
html body .afaq-owner-select-services-page .afaq-page-title span {
    color: var(--ss-muted) !important;
    font-weight: 760 !important;
}

html body .afaq-owner-select-services-page .afaq-page-title::after {
    content: "" !important;
    display: block !important;
    width: 92px !important;
    height: 3px !important;
    margin-top: 7px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--ss-gold), transparent) !important;
}

html body .afaq-owner-select-services-page .afaq-user-card {
    min-width: 148px !important;
    max-width: 190px !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(15,31,50,.08) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: var(--ss-shadow-xs) !important;
}

@media screen and (min-width: 1025px) {
    html body .afaq-app.afaq-owner-select-services-page button.afaq-mobile-menu-toggle,
    html body .afaq-app.afaq-owner-select-services-page .afaq-mobile-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

@media screen and (max-width: 1024px) {
    html body .afaq-app.afaq-owner-select-services-page button.afaq-mobile-menu-toggle,
    html body .afaq-app.afaq-owner-select-services-page .afaq-mobile-menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid rgba(255,255,255,.32) !important;
        border-radius: 13px !important;
        background-color: #c08c47 !important;
        background-image:
            linear-gradient(#ffffff, #ffffff),
            linear-gradient(#ffffff, #ffffff),
            linear-gradient(#ffffff, #ffffff),
            radial-gradient(circle at 28% 18%, rgba(255,255,255,.35), transparent 38%),
            linear-gradient(135deg, #c08c47 0%, #d9a15a 100%) !important;
        background-size: 18px 2px, 13px 2px, 18px 2px, 100% 100%, 100% 100% !important;
        background-position: center calc(50% - 7px), center center, center calc(50% + 7px), center center, center center !important;
        background-repeat: no-repeat !important;
        box-shadow: 0 10px 22px rgba(192,140,71,.24) !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    html body .afaq-app.afaq-owner-select-services-page button.afaq-mobile-menu-toggle::before,
    html body .afaq-app.afaq-owner-select-services-page button.afaq-mobile-menu-toggle::after,
    html body .afaq-app.afaq-owner-select-services-page .afaq-mobile-menu-toggle::before,
    html body .afaq-app.afaq-owner-select-services-page .afaq-mobile-menu-toggle::after {
        content: none !important;
        display: none !important;
    }
}

/* ==========================================================================
   03) CARDS / SECTIONS
   ========================================================================== */
html body .afaq-owner-select-services-page .afaq-dashboard-grid {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
}

html body .afaq-owner-select-services-page .afaq-dashboard-grid--owner,
html body .afaq-owner-select-services-page .afaq-dashboard-grid--owner-bottom {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    margin-bottom: 14px !important;
}

html body .afaq-owner-select-services-page .afaq-card,
html body .afaq-owner-select-services-page aside.afaq-card {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    border-radius: 28px !important;
    border: 1px solid var(--ss-border) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(192,140,71,.080), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #fffdf8 100%) !important;
    box-shadow: var(--ss-shadow-sm) !important;
    color: var(--ss-text) !important;
}

html body .afaq-owner-select-services-page .afaq-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 5px !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(192,140,71,.72), rgba(192,140,71,0)) !important;
    pointer-events: none !important;
}

html body .afaq-owner-select-services-page .afaq-card > * {
    position: relative !important;
    z-index: 1 !important;
}

html body .afaq-owner-select-services-page .afaq-section-head {
    margin: 0 0 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(15,31,50,.070) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

html body .afaq-owner-select-services-page .afaq-section-head h2 {
    margin: 8px 0 0 !important;
    color: var(--ss-title) !important;
    font-size: clamp(20px, 1.55vw, 30px) !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
    -webkit-text-fill-color: currentColor !important;
}

html body .afaq-owner-select-services-page .afaq-section-head p {
    margin: 6px 0 0 !important;
    color: var(--ss-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    font-weight: 760 !important;
}

html body .afaq-owner-select-services-page .afaq-kicker {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 27px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #98652a !important;
    background: rgba(192,140,71,.10) !important;
    border: 1px solid rgba(192,140,71,.22) !important;
    font-size: 11.2px !important;
    font-weight: 950 !important;
    line-height: 1.35 !important;
}

/* ==========================================================================
   04) BUTTONS / LINKS / STATUS
   ========================================================================== */
html body .afaq-owner-select-services-page .afaq-btn,
html body .afaq-owner-select-services-page a.afaq-btn,
html body .afaq-owner-select-services-page button.afaq-btn {
    position: relative !important;
    overflow: hidden !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15,31,50,.080) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: var(--ss-text) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 8px 18px rgba(7,19,33,.044) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition), background var(--ss-transition), color var(--ss-transition) !important;
}

html body .afaq-owner-select-services-page .afaq-btn:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(192,140,71,.30) !important;
    box-shadow: 0 14px 28px rgba(7,19,33,.075) !important;
}

html body .afaq-owner-select-services-page .afaq-btn--primary {
    color: #ffffff !important;
    border-color: rgba(192,140,71,.25) !important;
    background: linear-gradient(135deg, var(--ss-gold), var(--ss-gold-2)) !important;
    box-shadow: 0 14px 28px rgba(192,140,71,.22) !important;
}

html body .afaq-owner-select-services-page .afaq-btn--ghost,
html body .afaq-owner-select-services-page .afaq-link {
    color: #98652a !important;
    border-color: rgba(192,140,71,.20) !important;
    background: rgba(192,140,71,.09) !important;
}

html body .afaq-owner-select-services-page .afaq-link {
    min-height: 32px !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11.4px !important;
    font-weight: 950 !important;
}

html body .afaq-owner-select-services-page .afaq-status {
    width: fit-content !important;
    min-height: 28px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    color: #98652a !important;
    background: #fff4df !important;
    border: 1px solid rgba(192,140,71,.28) !important;
    font-size: 10.8px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

html body .afaq-owner-select-services-page :where(.afaq-status--paid,.afaq-status--completed,.afaq-status--approved) {
    color: #137344 !important;
    background: var(--ss-green-soft) !important;
    border-color: rgba(23,134,80,.22) !important;
}

html body .afaq-owner-select-services-page :where(.afaq-status--rejected,.afaq-status--cancelled) {
    color: var(--ss-red) !important;
    background: var(--ss-red-soft) !important;
    border-color: rgba(201,67,67,.22) !important;
}

/* ==========================================================================
   05) SERVICE SELECTION - ROYAL MAIN AREA
   ========================================================================== */
html body .afaq-owner-select-services-page .afaq-card--form,
html body .afaq-owner-select-services-page #afaq-select-services-form {
    border-color: rgba(192,140,71,.22) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(192,140,71,.12), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(7,19,33,.035), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fffaf2 100%) !important;
    box-shadow: var(--ss-shadow-md) !important;
}

html body .afaq-owner-select-services-page .afaq-form,
html body .afaq-owner-select-services-page .afaq-services-form {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
}

html body .afaq-owner-select-services-page .afaq-choice-grid,
html body .afaq-owner-select-services-page .afaq-service-selection-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
}

html body .afaq-owner-select-services-page .afaq-choice-card,
html body .afaq-owner-select-services-page .afaq-service-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 168px !important;
    padding: 15px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(15,31,50,.085) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(192,140,71,.075), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fffdf8 100%) !important;
    box-shadow: 0 10px 25px rgba(7,19,33,.050) !important;
    color: var(--ss-text) !important;
    cursor: pointer !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 13px !important;
    transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition), background var(--ss-transition) !important;
}

html body .afaq-owner-select-services-page .afaq-choice-card::before,
html body .afaq-owner-select-services-page .afaq-service-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(135deg, rgba(192,140,71,.14), transparent 38%),
        radial-gradient(circle at 100% 0%, rgba(255,255,255,.75), transparent 28%) !important;
    opacity: 0 !important;
    transition: opacity var(--ss-transition) !important;
    pointer-events: none !important;
}

html body .afaq-owner-select-services-page .afaq-choice-card:hover,
html body .afaq-owner-select-services-page .afaq-service-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(192,140,71,.38) !important;
    box-shadow: 0 18px 42px rgba(7,19,33,.085) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(192,140,71,.12), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #fff7eb 100%) !important;
}

html body .afaq-owner-select-services-page .afaq-choice-card:hover::before,
html body .afaq-owner-select-services-page .afaq-service-card:hover::before {
    opacity: 1 !important;
}

html body .afaq-owner-select-services-page .afaq-choice-card.is-selected,
html body .afaq-owner-select-services-page .afaq-service-card.is-selected {
    border-color: rgba(192,140,71,.60) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(192,140,71,.16), transparent 38%),
        linear-gradient(180deg, #ffffff 0%, #fff3dc 100%) !important;
    box-shadow:
        0 0 0 4px rgba(192,140,71,.095),
        0 20px 48px rgba(192,140,71,.16) !important;
}

html body .afaq-owner-select-services-page .afaq-choice-card input[type="checkbox"],
html body .afaq-owner-select-services-page .afaq-service-card input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__check {
    position: absolute !important;
    top: 13px !important;
    left: 13px !important;
    z-index: 3 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(192,140,71,.24) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 7px 16px rgba(7,19,33,.045) !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__check::before {
    content: "✓" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    opacity: 0 !important;
    transform: scale(.6) !important;
    transition: opacity var(--ss-transition), transform var(--ss-transition) !important;
}

html body .afaq-owner-select-services-page .afaq-choice-card.is-selected .afaq-service-card__check,
html body .afaq-owner-select-services-page .afaq-service-card.is-selected .afaq-service-card__check,
html body .afaq-owner-select-services-page .afaq-service-card input[type="checkbox"]:checked + .afaq-service-card__check {
    border-color: rgba(192,140,71,.45) !important;
    background: linear-gradient(135deg, var(--ss-gold), var(--ss-gold-2)) !important;
    box-shadow: 0 12px 22px rgba(192,140,71,.25) !important;
}

html body .afaq-owner-select-services-page .afaq-choice-card.is-selected .afaq-service-card__check::before,
html body .afaq-owner-select-services-page .afaq-service-card.is-selected .afaq-service-card__check::before,
html body .afaq-owner-select-services-page .afaq-service-card input[type="checkbox"]:checked + .afaq-service-card__check::before {
    opacity: 1 !important;
    transform: scale(1) !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__head {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr) !important;
    gap: 11px !important;
    align-items: start !important;
    padding-left: 36px !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__icon {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    color: var(--ss-gold) !important;
    background: rgba(192,140,71,.115) !important;
    border: 1px solid rgba(192,140,71,.20) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__icon .dashicons {
    width: 23px !important;
    height: 23px !important;
    font-size: 23px !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__title {
    min-width: 0 !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__badge {
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 22px !important;
    padding: 3px 8px !important;
    margin-bottom: 6px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #98652a !important;
    background: rgba(192,140,71,.11) !important;
    border: 1px solid rgba(192,140,71,.20) !important;
    font-size: 9.8px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__title h3 {
    margin: 0 !important;
    color: var(--ss-title) !important;
    font-size: 15.2px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__meta,
html body .afaq-owner-select-services-page .afaq-service-card__meta--compact {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 8px !important;
    align-self: end !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__meta-item {
    min-height: 50px !important;
    padding: 9px 10px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.88) !important;
    border: 1px solid rgba(15,31,50,.070) !important;
    box-shadow: 0 6px 14px rgba(7,19,33,.030) !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__meta-item span {
    display: block !important;
    color: var(--ss-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
}

html body .afaq-owner-select-services-page .afaq-service-card__meta-item strong {
    display: block !important;
    margin-top: 4px !important;
    color: var(--ss-title) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
}

html body .afaq-owner-select-services-page .afaq-form-actions {
    position: sticky !important;
    bottom: 14px !important;
    z-index: 12 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 21px !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(15,31,50,.075) !important;
    box-shadow: 0 18px 46px rgba(7,19,33,.085) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* ==========================================================================
   06) REQUESTS LIST
   ========================================================================== */
html body .afaq-owner-select-services-page .afaq-list-stack {
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
}

html body .afaq-owner-select-services-page .afaq-list-item {
    position: relative !important;
    overflow: hidden !important;
    min-height: 68px !important;
    padding: 12px !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, #ffffff 0%, #fffdf8 100%) !important;
    border: 1px solid rgba(15,31,50,.075) !important;
    box-shadow: 0 8px 18px rgba(7,19,33,.035) !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

html body .afaq-owner-select-services-page .afaq-list-item__main {
    min-width: 0 !important;
}

html body .afaq-owner-select-services-page .afaq-list-item__main h3 {
    margin: 0 !important;
    color: var(--ss-title) !important;
    font-size: 13.2px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
}

html body .afaq-owner-select-services-page .afaq-list-item__main p {
    margin: 4px 0 0 !important;
    color: var(--ss-muted) !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    font-weight: 760 !important;
}

html body .afaq-owner-select-services-page .afaq-list-item__side {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

html body .afaq-owner-select-services-page .afaq-empty-state {
    max-width: 760px !important;
    margin: 8px auto !important;
    padding: 26px !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    border: 1px solid rgba(192,140,71,.22) !important;
    box-shadow: var(--ss-shadow-sm) !important;
    text-align: center !important;
}

html body .afaq-owner-select-services-page .afaq-empty-state__icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    margin: 0 auto 12px !important;
    background: rgba(192,140,71,.11) !important;
    color: var(--ss-gold) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .afaq-owner-select-services-page .afaq-empty-state h3 {
    margin: 0 0 7px !important;
    color: var(--ss-title) !important;
    font-size: 19px !important;
    font-weight: 950 !important;
}

html body .afaq-owner-select-services-page .afaq-empty-state p {
    margin: 0 !important;
    color: var(--ss-muted) !important;
    font-size: 12.5px !important;
    font-weight: 760 !important;
}

/* ==========================================================================
   07) NOTICES
   ========================================================================== */
html body .afaq-owner-select-services-page .afaq-notices {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
}

html body .afaq-owner-select-services-page .afaq-notice {
    margin: 0 !important;
    padding: 13px 15px !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15,31,50,.080) !important;
    box-shadow: var(--ss-shadow-xs) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ==========================================================================
   08) MOBILE NUCLEAR RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 1280px) {
    html body .afaq-owner-select-services-page .afaq-choice-grid,
    html body .afaq-owner-select-services-page .afaq-service-selection-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media screen and (max-width: 1024px) {
    html body .afaq-app.afaq-owner-select-services-page,
    html body .afaq-app.afaq-owner-select-services-page .afaq-main,
    html body .afaq-app.afaq-owner-select-services-page .afaq-main:not(.afaq-main--standalone),
    html body .afaq-app.afaq-owner-select-services-page .afaq-content,
    html body .afaq-app.afaq-owner-select-services-page .afaq-content--dashboard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
    }

    html body .afaq-owner-select-services-page .afaq-content,
    html body .afaq-owner-select-services-page .afaq-content--dashboard {
        padding: 7px 7px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    html body .afaq-owner-select-services-page .afaq-dashboard-grid,
    html body .afaq-owner-select-services-page .afaq-dashboard-grid--owner,
    html body .afaq-owner-select-services-page .afaq-dashboard-grid--owner-bottom,
    html body .afaq-owner-select-services-page .afaq-choice-grid,
    html body .afaq-owner-select-services-page .afaq-service-selection-grid,
    html body .afaq-owner-select-services-page .afaq-list-stack {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        grid-template-columns: none !important;
        margin: 0 !important;
    }

    html body .afaq-owner-select-services-page .afaq-card,
    html body .afaq-owner-select-services-page .afaq-choice-card,
    html body .afaq-owner-select-services-page .afaq-service-card,
    html body .afaq-owner-select-services-page .afaq-list-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body .afaq-owner-select-services-page [data-afaq-pwa-install],
    html body .afaq-owner-select-services-page .afaq-pwa-install,
    html body .afaq-owner-select-services-page .afaq-install-pwa,
    html body .afaq-owner-select-services-page .afaq-install-button {
        display: none !important;
    }
}

@media screen and (max-width: 760px) {
    html body .afaq-owner-select-services-page .afaq-topbar {
        padding: 4px 5px 3px !important;
    }

    html body .afaq-owner-select-services-page .afaq-topbar__content {
        min-height: 58px !important;
        padding: 7px 8px !important;
        border-radius: 14px !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        grid-template-areas: "title toggle" !important;
        gap: 8px !important;
    }

    html body .afaq-owner-select-services-page .afaq-mobile-menu-toggle {
        grid-area: toggle !important;
        justify-self: end !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title {
        grid-area: title !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title h1,
    html body .afaq-owner-select-services-page .afaq-page-title strong {
        font-size: 18px !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title p {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 2px 0 0 !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title span,
    html body .afaq-owner-select-services-page .afaq-page-title .afaq-kicker,
    html body .afaq-owner-select-services-page .afaq-page-title .afaq-eyebrow,
    html body .afaq-owner-select-services-page .afaq-page-title::before,
    html body .afaq-owner-select-services-page .afaq-page-title::after,
    html body .afaq-owner-select-services-page .afaq-topbar__actions,
    html body .afaq-owner-select-services-page .afaq-header-actions,
    html body .afaq-owner-select-services-page .afaq-user-card,
    html body .afaq-owner-select-services-page .afaq-header-back {
        display: none !important;
    }

    html body .afaq-owner-select-services-page .afaq-content,
    html body .afaq-owner-select-services-page .afaq-content--dashboard {
        padding: 5px 5px 16px !important;
        gap: 7px !important;
    }

    html body .afaq-owner-select-services-page .afaq-card {
        padding: 8px !important;
        border-radius: 13px !important;
    }

    html body .afaq-owner-select-services-page .afaq-section-head {
        display: block !important;
        margin-bottom: 7px !important;
        padding-bottom: 7px !important;
    }

    html body .afaq-owner-select-services-page .afaq-section-head h2 {
        font-size: 15.5px !important;
        margin-top: 4px !important;
        line-height: 1.22 !important;
    }

    html body .afaq-owner-select-services-page .afaq-section-head p {
        font-size: 9.8px !important;
        line-height: 1.35 !important;
    }

    html body .afaq-owner-select-services-page .afaq-kicker,
    html body .afaq-owner-select-services-page .afaq-status {
        min-height: 20px !important;
        padding: 2px 7px !important;
        font-size: 9px !important;
    }

    html body .afaq-owner-select-services-page .afaq-choice-card,
    html body .afaq-owner-select-services-page .afaq-service-card {
        min-height: 0 !important;
        padding: 8px !important;
        border-radius: 12px !important;
        gap: 8px !important;
        grid-template-rows: auto auto !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__check {
        top: 8px !important;
        left: 8px !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 8px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__check::before {
        font-size: 13px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__head {
        grid-template-columns: 36px minmax(0,1fr) !important;
        gap: 8px !important;
        padding-left: 30px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__icon {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__icon .dashicons {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__badge {
        min-height: 19px !important;
        padding: 2px 6px !important;
        margin-bottom: 4px !important;
        font-size: 8.5px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__title h3 {
        font-size: 11.4px !important;
        line-height: 1.28 !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__meta-item {
        min-height: 0 !important;
        padding: 7px !important;
        border-radius: 10px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__meta-item span {
        font-size: 8.8px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__meta-item strong {
        font-size: 10.8px !important;
        margin-top: 2px !important;
    }

    html body .afaq-owner-select-services-page .afaq-form-actions {
        position: sticky !important;
        bottom: 6px !important;
        padding: 7px !important;
        border-radius: 12px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    html body .afaq-owner-select-services-page .afaq-btn,
    html body .afaq-owner-select-services-page a.afaq-btn,
    html body .afaq-owner-select-services-page button.afaq-btn {
        width: 100% !important;
        min-height: 34px !important;
        padding: 7px 8px !important;
        border-radius: 9px !important;
        font-size: 10.5px !important;
        white-space: normal !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item {
        min-height: 0 !important;
        padding: 7px !important;
        border-radius: 10px !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 5px !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item__side {
        justify-content: flex-start !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item__main h3 {
        font-size: 10.8px !important;
        line-height: 1.25 !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item__main p {
        font-size: 9.3px !important;
        line-height: 1.35 !important;
    }

    html body .afaq-owner-select-services-page .afaq-empty-state {
        padding: 13px 9px !important;
        border-radius: 12px !important;
    }

    html body .afaq-owner-select-services-page .afaq-empty-state__icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        margin-bottom: 7px !important;
    }

    html body .afaq-owner-select-services-page .afaq-empty-state h3 {
        font-size: 14px !important;
    }

    html body .afaq-owner-select-services-page .afaq-empty-state p {
        font-size: 9.4px !important;
        line-height: 1.35 !important;
    }
}

@media screen and (max-width: 430px) {
    html body .afaq-owner-select-services-page .afaq-topbar__content {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        padding: 6px 7px !important;
    }

    html body .afaq-owner-select-services-page .afaq-mobile-menu-toggle,
    html body .afaq-owner-select-services-page button.afaq-mobile-menu-toggle {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title h1,
    html body .afaq-owner-select-services-page .afaq-page-title strong {
        font-size: 17px !important;
    }
}

/* ==========================================================================
   09) PRINT
   ========================================================================== */
@media print {
    html body .afaq-owner-select-services-page .afaq-sidebar,
    html body .afaq-owner-select-services-page .afaq-topbar,
    html body .afaq-owner-select-services-page .afaq-btn,
    html body .afaq-owner-select-services-page .afaq-link,
    html body .afaq-owner-select-services-page .afaq-form-actions {
        display: none !important;
    }

    html body .afaq-owner-select-services-page .afaq-main {
        width: 100% !important;
        margin: 0 !important;
    }

    html body .afaq-owner-select-services-page .afaq-card {
        box-shadow: none !important;
        break-inside: avoid !important;
    }
}

/* ==========================================================================
   AFAQ SELECT SERVICES - V2 ROYAL DESKTOP + PWA FIX
   Version: select-services-v2-royal-desktop-mobile-hard
   Purpose:
   - إصلاح الكمبيوتر: استغلال المساحة وتوزيع الخدمات بشكل ملوكي
   - إصلاح زر تثبيت التطبيق حتى لا يظهر كشريط جانبي
   - ضغط الهاتف بعمود واحد بدون قص
   - منع أي خلفية غامقة أو تمدد عرضي
   ========================================================================== */

/* PWA button safety - all screens */
html body .afaq-app.afaq-owner-select-services-page [data-afaq-pwa-install],
html body .afaq-app.afaq-owner-select-services-page .afaq-pwa-install,
html body .afaq-app.afaq-owner-select-services-page .afaq-install-pwa,
html body .afaq-app.afaq-owner-select-services-page .afaq-install-button {
    position: fixed !important;
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    top: auto !important;
    z-index: 150 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 168px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 13px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #c08c47 0%, #d9a15a 100%) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: 0 14px 34px rgba(192,140,71,.24) !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    overflow: hidden !important;
}

html body .afaq-app.afaq-owner-select-services-page [data-afaq-pwa-install] *,
html body .afaq-app.afaq-owner-select-services-page .afaq-pwa-install *,
html body .afaq-app.afaq-owner-select-services-page .afaq-install-pwa *,
html body .afaq-app.afaq-owner-select-services-page .afaq-install-button * {
    color: inherit !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    line-height: 1.2 !important;
}

/* Desktop royal rebuild */
@media screen and (min-width: 1025px) {
    html body .afaq-app.afaq-owner-select-services-page {
        --ss-sidebar: var(--afaq-sidebar, 270px) !important;
        background:
            radial-gradient(circle at 7% 0%, rgba(192,140,71,.115), transparent 31%),
            radial-gradient(circle at 95% 11%, rgba(17,39,66,.055), transparent 35%),
            linear-gradient(180deg, #fffaf2 0%, #ffffff 38%, #f7f9fc 100%) !important;
    }

    html body .afaq-owner-select-services-page .afaq-main:not(.afaq-main--standalone) {
        width: calc(100% - var(--ss-sidebar)) !important;
        margin-right: var(--ss-sidebar) !important;
        margin-left: 0 !important;
    }

    html body .afaq-owner-select-services-page .afaq-content,
    html body .afaq-owner-select-services-page .afaq-content--dashboard {
        padding: 18px 22px 54px !important;
        display: grid !important;
        gap: 18px !important;
        overflow: visible !important;
    }

    html body .afaq-owner-select-services-page .afaq-topbar {
        padding: 14px 22px 8px !important;
    }

    html body .afaq-owner-select-services-page .afaq-topbar__content {
        min-height: 96px !important;
        padding: 18px 20px !important;
        border-radius: 30px !important;
        background:
            radial-gradient(circle at 10% 0%, rgba(192,140,71,.14), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,.99), rgba(255,250,242,.97)) !important;
        border-color: rgba(192,140,71,.16) !important;
        box-shadow: 0 18px 48px rgba(7,19,33,.073) !important;
    }

    html body .afaq-owner-select-services-page .afaq-dashboard-grid,
    html body .afaq-owner-select-services-page .afaq-dashboard-grid--owner,
    html body .afaq-owner-select-services-page .afaq-dashboard-grid--owner-bottom {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    html body .afaq-owner-select-services-page .afaq-card,
    html body .afaq-owner-select-services-page .afaq-card--form {
        padding: 24px !important;
        border-radius: 32px !important;
        background:
            radial-gradient(circle at 0% 0%, rgba(192,140,71,.105), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #fffdf8 100%) !important;
        border: 1px solid rgba(192,140,71,.18) !important;
        box-shadow: 0 24px 70px rgba(7,19,33,.083) !important;
    }

    html body .afaq-owner-select-services-page #afaq-select-services-form {
        min-height: auto !important;
    }

    html body .afaq-owner-select-services-page .afaq-section-head {
        min-height: 86px !important;
        align-items: center !important;
        padding-bottom: 16px !important;
        margin-bottom: 18px !important;
    }

    html body .afaq-owner-select-services-page .afaq-section-head h2 {
        font-size: clamp(26px, 2vw, 42px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important;
    }

    html body .afaq-owner-select-services-page .afaq-kicker {
        min-height: 30px !important;
        padding: 6px 12px !important;
        font-size: 11.6px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
    }

    html body .afaq-owner-select-services-page .afaq-services-form {
        gap: 18px !important;
    }

    html body .afaq-owner-select-services-page .afaq-choice-grid,
    html body .afaq-owner-select-services-page .afaq-service-selection-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 14px !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body .afaq-owner-select-services-page .afaq-choice-card,
    html body .afaq-owner-select-services-page .afaq-service-card {
        min-height: 178px !important;
        padding: 17px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(15,31,50,.085) !important;
        background:
            radial-gradient(circle at 0% 0%, rgba(192,140,71,.085), transparent 35%),
            linear-gradient(180deg, #ffffff 0%, #fffaf2 100%) !important;
        box-shadow: 0 12px 28px rgba(7,19,33,.052) !important;
    }

    html body .afaq-owner-select-services-page .afaq-choice-card.is-selected,
    html body .afaq-owner-select-services-page .afaq-service-card.is-selected {
        border-color: rgba(192,140,71,.62) !important;
        background:
            radial-gradient(circle at 0% 0%, rgba(192,140,71,.18), transparent 40%),
            linear-gradient(180deg, #ffffff 0%, #fff1d8 100%) !important;
        box-shadow:
            0 0 0 4px rgba(192,140,71,.10),
            0 22px 52px rgba(192,140,71,.17) !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__head {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__icon {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        border-radius: 18px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__icon .dashicons {
        width: 25px !important;
        height: 25px !important;
        font-size: 25px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__title h3 {
        font-size: 16px !important;
        line-height: 1.32 !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__meta-item {
        min-height: 54px !important;
        border-radius: 17px !important;
        background: rgba(255,255,255,.92) !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__meta-item strong {
        font-size: 15px !important;
    }

    html body .afaq-owner-select-services-page .afaq-form-actions {
        bottom: 16px !important;
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 24px !important;
    }

    html body .afaq-owner-select-services-page .afaq-form-actions .afaq-btn {
        min-width: 178px !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item {
        min-height: 72px !important;
        padding: 13px 14px !important;
        border-radius: 18px !important;
    }
}

/* Tablet / Mobile: kill desktop stretching */
@media screen and (max-width: 1024px) {
    html,
    html body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    html body .afaq-app.afaq-owner-select-services-page,
    html body .afaq-app.afaq-owner-select-services-page *,
    html body .afaq-app.afaq-owner-select-services-page *::before,
    html body .afaq-app.afaq-owner-select-services-page *::after {
        box-sizing: border-box !important;
    }

    html body .afaq-app.afaq-owner-select-services-page,
    html body .afaq-app.afaq-owner-select-services-page .afaq-main,
    html body .afaq-app.afaq-owner-select-services-page .afaq-main:not(.afaq-main--standalone),
    html body .afaq-app.afaq-owner-select-services-page .afaq-content,
    html body .afaq-app.afaq-owner-select-services-page .afaq-content--dashboard {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    html body .afaq-owner-select-services-page .afaq-content,
    html body .afaq-owner-select-services-page .afaq-content--dashboard {
        padding: 7px 7px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    html body .afaq-owner-select-services-page .afaq-dashboard-grid,
    html body .afaq-owner-select-services-page .afaq-dashboard-grid--owner,
    html body .afaq-owner-select-services-page .afaq-dashboard-grid--owner-bottom,
    html body .afaq-owner-select-services-page .afaq-choice-grid,
    html body .afaq-owner-select-services-page .afaq-service-selection-grid,
    html body .afaq-owner-select-services-page .afaq-list-stack,
    html body .afaq-owner-select-services-page .afaq-services-form {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        grid-template-columns: none !important;
        margin: 0 !important;
    }

    html body .afaq-owner-select-services-page .afaq-card,
    html body .afaq-owner-select-services-page .afaq-card--form,
    html body .afaq-owner-select-services-page .afaq-choice-card,
    html body .afaq-owner-select-services-page .afaq-service-card,
    html body .afaq-owner-select-services-page .afaq-list-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body .afaq-owner-select-services-page [data-afaq-pwa-install],
    html body .afaq-owner-select-services-page .afaq-pwa-install,
    html body .afaq-owner-select-services-page .afaq-install-pwa,
    html body .afaq-owner-select-services-page .afaq-install-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Mobile final topbar + compact cards */
@media screen and (max-width: 760px) {
    html body .afaq-owner-select-services-page .afaq-topbar {
        padding: 4px 5px 3px !important;
    }

    html body .afaq-owner-select-services-page .afaq-topbar__content {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        padding: 7px 8px !important;
        border-radius: 14px !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        grid-template-areas: "title toggle" !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    html body .afaq-owner-select-services-page .afaq-mobile-menu-toggle {
        grid-area: toggle !important;
        justify-self: end !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title {
        grid-area: title !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-align: right !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title h1,
    html body .afaq-owner-select-services-page .afaq-page-title strong {
        font-size: 18px !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        text-align: right !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title p {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 2px 0 0 !important;
        text-align: right !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title span,
    html body .afaq-owner-select-services-page .afaq-page-title .afaq-kicker,
    html body .afaq-owner-select-services-page .afaq-page-title .afaq-eyebrow,
    html body .afaq-owner-select-services-page .afaq-page-title::before,
    html body .afaq-owner-select-services-page .afaq-page-title::after,
    html body .afaq-owner-select-services-page .afaq-topbar__actions,
    html body .afaq-owner-select-services-page .afaq-header-actions,
    html body .afaq-owner-select-services-page .afaq-user-card,
    html body .afaq-owner-select-services-page .afaq-header-back {
        display: none !important;
    }

    html body .afaq-owner-select-services-page .afaq-content,
    html body .afaq-owner-select-services-page .afaq-content--dashboard {
        padding: 5px 5px 16px !important;
        gap: 7px !important;
    }

    html body .afaq-owner-select-services-page .afaq-card,
    html body .afaq-owner-select-services-page .afaq-card--form {
        padding: 8px !important;
        border-radius: 13px !important;
        box-shadow: 0 10px 24px rgba(7,19,33,.052) !important;
    }

    html body .afaq-owner-select-services-page .afaq-section-head {
        display: block !important;
        margin-bottom: 7px !important;
        padding-bottom: 7px !important;
    }

    html body .afaq-owner-select-services-page .afaq-section-head h2 {
        font-size: 15.5px !important;
        margin-top: 4px !important;
        line-height: 1.22 !important;
    }

    html body .afaq-owner-select-services-page .afaq-section-head p {
        font-size: 9.8px !important;
        line-height: 1.35 !important;
    }

    html body .afaq-owner-select-services-page .afaq-kicker,
    html body .afaq-owner-select-services-page .afaq-status {
        min-height: 20px !important;
        padding: 2px 7px !important;
        font-size: 9px !important;
    }

    html body .afaq-owner-select-services-page .afaq-choice-card,
    html body .afaq-owner-select-services-page .afaq-service-card {
        min-height: 0 !important;
        padding: 8px !important;
        border-radius: 12px !important;
        gap: 8px !important;
        display: grid !important;
        grid-template-rows: auto auto !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__check {
        top: 8px !important;
        left: 8px !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 8px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__check::before {
        font-size: 13px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__head {
        grid-template-columns: 36px minmax(0,1fr) !important;
        gap: 8px !important;
        padding-left: 30px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__icon {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__icon .dashicons {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__badge {
        min-height: 19px !important;
        padding: 2px 6px !important;
        margin-bottom: 4px !important;
        font-size: 8.5px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__title h3 {
        font-size: 11.4px !important;
        line-height: 1.28 !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__meta-item {
        min-height: 0 !important;
        padding: 7px !important;
        border-radius: 10px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__meta-item span {
        font-size: 8.8px !important;
    }

    html body .afaq-owner-select-services-page .afaq-service-card__meta-item strong {
        font-size: 10.8px !important;
        margin-top: 2px !important;
    }

    html body .afaq-owner-select-services-page .afaq-form-actions {
        position: sticky !important;
        bottom: 6px !important;
        padding: 7px !important;
        border-radius: 12px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    html body .afaq-owner-select-services-page .afaq-btn,
    html body .afaq-owner-select-services-page a.afaq-btn,
    html body .afaq-owner-select-services-page button.afaq-btn {
        width: 100% !important;
        min-height: 34px !important;
        padding: 7px 8px !important;
        border-radius: 9px !important;
        font-size: 10.5px !important;
        white-space: normal !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item {
        min-height: 0 !important;
        padding: 7px !important;
        border-radius: 10px !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 5px !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item__side {
        justify-content: flex-start !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item__main h3 {
        font-size: 10.8px !important;
        line-height: 1.25 !important;
    }

    html body .afaq-owner-select-services-page .afaq-list-item__main p {
        font-size: 9.3px !important;
        line-height: 1.35 !important;
    }
}

@media screen and (max-width: 430px) {
    html body .afaq-owner-select-services-page .afaq-topbar__content {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        padding: 6px 7px !important;
    }

    html body .afaq-owner-select-services-page .afaq-mobile-menu-toggle,
    html body .afaq-owner-select-services-page button.afaq-mobile-menu-toggle {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body .afaq-owner-select-services-page .afaq-page-title h1,
    html body .afaq-owner-select-services-page .afaq-page-title strong {
        font-size: 17px !important;
    }
}