between grid items (e.g., wpautop). That breaks the 2-column placement by occupying a grid cell. Safe to hide inside the account UI grid. */ .cottonia-aui-grid > p{display:none !important; margin:0 !important; padding:0 !important;} /* Sidebar tiles: some environments inject an empty
inside each link (often on RTL pages). That extra node creates duplicated "pills". Hide it defensively. */ body.woocommerce-account .cottonia-aui-grid > aside a.cottonia-tile > p{display:none !important; margin:0 !important; padding:0 !important; height:0 !important;} @media(min-width: 768px){ /* Align both columns top/bottom like the English/default layout */ body.woocommerce-account .cottonia-aui-grid{padding-block: 34px !important;} body.woocommerce-account .cottonia-aui-grid > aside, body.woocommerce-account .cottonia-aui-grid > main{margin: 0 !important;} /* Remove accidental top gaps inside the first cards/content so both columns start at same Y */ body.woocommerce-account .cottonia-aui-grid > aside .cottonia-card:first-child{margin-top:0 !important;} body.woocommerce-account .woocommerce-MyAccount-content > :first-child{margin-top:0 !important;} body.woocommerce-account .woocommerce-MyAccount-content{margin-top:0 !important; padding-top:0 !important;} /* LTR layout only when NOT RTL (prevents accidental overrides on Arabic pages) */ body:not(.rtl) .cottonia-aui-grid, html[dir="ltr"] .cottonia-aui-grid, .cottonia-aui:not([dir="rtl"]) .cottonia-aui-grid{ grid-template-columns: var(--sidebar-w) 1fr !important; } body:not(.rtl) .cottonia-aui-grid > aside, html[dir="ltr"] .cottonia-aui-grid > aside, .cottonia-aui:not([dir="rtl"]) .cottonia-aui-grid > aside{ grid-column: 1 !important; grid-row: 1 !important; max-width: var(--sidebar-w) !important; width:100% !important; } body:not(.rtl) .cottonia-aui-grid > main, html[dir="ltr"] .cottonia-aui-grid > main, .cottonia-aui:not([dir="rtl"]) .cottonia-aui-grid > main{ grid-column: 2 !important; grid-row: 1 !important; min-width:0 !important; } /* RTL layout (force) */ body.rtl .cottonia-aui-grid, html[dir="rtl"] .cottonia-aui-grid, .cottonia-aui--rtl .cottonia-aui-grid, .cottonia-aui[dir="rtl"] .cottonia-aui-grid{ /* Make the grid itself LTR so columns are placed physically (left->right), while keeping content RTL inside aside/main. */ direction: ltr !important; grid-template-columns: 1fr var(--sidebar-w) !important; } body.rtl .cottonia-aui-grid > aside, html[dir="rtl"] .cottonia-aui-grid > aside, .cottonia-aui--rtl .cottonia-aui-grid > aside, .cottonia-aui[dir="rtl"] .cottonia-aui-grid > aside{ grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; max-width: var(--sidebar-w) !important; width:100% !important; direction: rtl !important; margin: 0 !important; } body.rtl .cottonia-aui-grid > main, html[dir="rtl"] .cottonia-aui-grid > main, .cottonia-aui--rtl .cottonia-aui-grid > main, .cottonia-aui[dir="rtl"] .cottonia-aui-grid > main{ grid-column: 1 !important; grid-row: 1 !important; min-width:0 !important; direction: rtl !important; margin: 0 !important; } } /* RTL typography tweaks (Arabic sidebar greeting) */ /* Sidebar tile markup can contain an empty
(in some WPML/Woo setups). Hide it to prevent duplicate "pills". */
body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile > p{display:none !important; margin:0 !important; padding:0 !important; height:0 !important;}
/* Quantity input (single product) */
.single-product input.qty,
.woocommerce-page .quantity input.qty{
border-radius: 12px !important;
}
.cottonia-card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--pad);}
.cottonia-card.soft{box-shadow:none;border-radius:16px;background:rgba(0,0,0,.02);}
.cottonia-card h3{margin:0 0 6px;font-size:16px;line-height:1.2; font-weight:650;}
body.rtl .cottonia-card h3{font-size:15px; font-weight:650;}
/* Order top cards (4 cards): headings should be clearly readable */
.cottonia-grid.cols-4 .cottonia-card h3{font-size:18px;}
body.rtl .cottonia-grid.cols-4 .cottonia-card h3{font-size:18px;}
.cottonia-sub{color:var(--muted);font-size:15px;line-height:1.4}
/* Center Orders Count card content */
.cottonia-orders-count{
display:flex;
flex-direction:column;
justify-content:center; /* vertical center */
align-items:center; /* horizontal center */
text-align:center;
}
/* Optional: reduce spacing above/below title */
.cottonia-orders-count h3{
margin-bottom:6px;
}
/* Optional: make the number stand out more */
.cottonia-orders-count .cottonia-big{
margin-top:6px;
}
.cottonia-big{font-size:28px;font-weight:950;margin-top:10px;}
.cottonia-mid{font-size:18px;font-weight:950;margin-top:6px;}
.cottonia-mid-sm{font-size:14px;font-weight:950;margin-top:6px;}
.cottonia-val{color:rgba(0,0,0,.85);font-weight:950;}
.cottonia-hr{height:1px;background:var(--bd);margin:12px 0;}
/* Align values baseline across the 4 order cards (Total / Services / Revisions / Timeline) */
.cottonia-grid.cols-4 .cottonia-card{display:flex;flex-direction:column;}
.cottonia-grid.cols-4 .cottonia-big,
.cottonia-grid.cols-4 .cottonia-mid,
.cottonia-grid.cols-4 .cottonia-mid-sm{margin-top:auto; line-height:1.15;}
/* Sidebar */
.cottonia-myacc-title{text-align:center;font-weight:650;font-size:16px;}
body.rtl .cottonia-myacc-title{font-size:16px;font-weight:650;}
.cottonia-side-user{margin-top:10px;}
.cottonia-side-user .name{font-weight:950;font-size:15px;margin-bottom:4px;}
.cottonia-hi{font-weight:800;font-size:12px;opacity:.75;}
.cottonia-side-user .meta{font-size:12px;color:var(--muted);display:grid;gap:4px;}
/* Phone should remain LTR even in Arabic UI */
body.rtl .cottonia-side-phone{
direction: ltr;
unicode-bidi: embed;
/* Keep digits LTR, but align the block with the Arabic layout (right). */
text-align: right;
display:block;
width:100%;
}
/* Bigger welcome/title on Arabic sidebar */
body.rtl .cottonia-side-user .name{font-size:16.5px; line-height:1.55;}
body.rtl .cottonia-hi{font-size:13px;}
/* Sidebar indicator (replaces "Go") */
.cottonia-aui-indicator{
width:16px;
height:16px;
border-radius:999px;
border:2px solid rgba(0,0,0,.22);
background: transparent;
display:inline-block;
flex: 0 0 16px;
}
/* Active: green dot */
.cottonia-aui-indicator.is-active{
/* Solid dark dot (active state) */
background: var(--cottonia-active-dot, #5a4635);
border-color: var(--cottonia-active-dot, #5a4635);
box-shadow: 0 0 0 4px rgba(90, 70, 53, .18);
}
/* Extra safety: some themes reset child span backgrounds with !important.
Re-assert the filled active dot for account sidebar tiles. */
body.woocommerce-account .cottonia-tiles a.cottonia-tile .cottonia-aui-indicator.is-active{
background: var(--cottonia-active-dot, #5a4635) !important;
border-color: var(--cottonia-active-dot, #5a4635) !important;
}
.cottonia-tiles{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media(min-width: 960px){ .cottonia-tiles{grid-template-columns:1fr;} }
.cottonia-tile > p{display:none !important; margin:0 !important; padding:0 !important; height:0 !important;}
/* Sidebar labels: keep compact (do NOT enlarge) */
.cottonia-tiles a.cottonia-tile .t{
font-size: 14px;
font-weight: 650;
}
body.rtl .cottonia-tiles a.cottonia-tile .t{
font-size: 14px;
}
.cottonia-tile{
display:flex;gap:10px;align-items:center;justify-content:space-between;
border:1px solid var(--bd);border-radius:16px;padding:12px;background:rgba(0,0,0,.02);
text-decoration:none !important; color:inherit !important;
transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* Some themes paint "switch" tracks inside links using background shorthand/gradients.
Force a clean, flat button background for our sidebar tiles (high specificity). */
body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile,
body.rtl.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile,
html[dir='rtl'] body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile,
html[dir='ltr'] body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile{
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
filter: none !important;
border: 1px solid var(--bd) !important;
}
/* Restore hover + active states explicitly (themes often override link states) */
body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile:hover{
background: var(--cottonia-hover-bg) !important;
box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
border-color: rgba(216, 201, 180, .75) !important;
transform: translateY(-1px);
}
/* RTL: force same hover behavior as English (themes sometimes override RTL link states) */
body.rtl.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile:hover,
html[dir='rtl'] body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile:hover{
background: var(--cottonia-hover-bg) !important;
box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
border-color: rgba(216, 201, 180, .75) !important;
transform: translateY(-1px);
}
/* RTL: keep active state fixed (match English). Some themes give RTL links higher specificity. */
body.rtl.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile.is-active,
html[dir='rtl'] body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile.is-active{
background: var(--cottonia-active-bg) !important;
border-color: rgba(216, 201, 180, .95) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.08) !important;
}
body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile.is-active{
background: var(--cottonia-active-bg) !important;
border-color: rgba(216, 201, 180, .95) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.08) !important;
}
/* Prevent theme styles from turning child elements into extra "pills" */
body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile > div,
body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile > span:not(.cottonia-aui-indicator){
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* Hard reset: some themes apply switch/track gradients or shadows on inner elements */
body.woocommerce-account .cottonia-card .cottonia-tiles a.cottonia-tile *{
background-image: none !important;
box-shadow: none !important;
filter: none !important;
}
/* Some themes add decorative pseudo elements to account-nav links (e.g., ::before/::after)
which can render as extra "empty" pills under each item. Disable them explicitly. */
.cottonia-tile::before,
.cottonia-tile::after{
content:none !important;
display:none !important;
}
/* Hard-reset any theme rules that force column layout or extra internal blocks */
.cottonia-tile{
flex-direction:row !important;
height:auto !important;
}
/* =====================================================================
WCPC inline details (Arabic/RTL): prevent unwanted line breaks
===================================================================== */
/* Some versions inject
directly between spans. Hide them. */
/* Be aggressive: hide any
inside the inline wrapper if present. */
.wcpc-rev-inline br{display:none !important;}
span.wcpc-rev-inline-toggle br,
span.wcpc-rev-inline-label + br,
span.wcpc-rev-inline-counter + br,
span.wcpc-rev-inline-sep + br{display:none !important;}
.wcpc-rev-inline-label,
.wcpc-rev-inline-counter,
.wcpc-rev-inline-sep,
.wcpc-rev-inline-toggle,
span.wcpc-rev-inline-label,
span.wcpc-rev-inline-counter,
span.wcpc-rev-inline-sep,
span.wcpc-rev-inline-toggle{
display:inline !important;
white-space:nowrap !important;
}
body.woocommerce-account span.wcpc-rev-inline-toggle{display:inline-flex !important; gap:6px !important; align-items:center !important; white-space:nowrap !important;}
body.woocommerce-account span.wcpc-rev-inline-toggle > span{display:inline !important;}
/* =====================================================================
Order stat cards: keep values aligned on the same baseline
===================================================================== */
.cottonia-grid > .cottonia-card.soft{
display:flex;
flex-direction:column;
}
.cottonia-grid > .cottonia-card.soft .cottonia-mid,
.cottonia-grid > .cottonia-card.soft .cottonia-mid-sm{
margin-top:auto !important; /* push value to bottom for consistent alignment */
line-height:1.2 !important;
}
/* Ensure Add-ons button stays visible in RTL */
body.rtl .wcpc-addons-btn,
body.rtl .wcpc-addons-btn-ico,
body.rtl .wcpc-addons-btn-text{
display:inline-flex !important;
align-items:center !important;
}
body.rtl .wcpc-addons-btn{gap:8px !important; white-space:nowrap !important;}
body.rtl .woocommerce-MyAccount-content,
body.rtl .cottonia-aui main{overflow:visible !important;}
.cottonia-tile > *{
margin:0 !important;
}
.cottonia-tile:hover{
transform: translateY(-1px);
background: var(--cottonia-hover-bg) !important;
border-color: rgba(216, 201, 180, .75) !important;
box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
}
/* Active menu item: keep it clearly highlighted */
.cottonia-tile.is-active{
border-color: rgba(216, 201, 180, .95) !important;
background: var(--cottonia-active-bg) !important;
}
.cottonia-tile.is-active:hover{
background: rgba(216, 201, 180, .34) !important;
}
/* Ensure active state is also clear even without hover */
.cottonia-tile:focus,
.cottonia-tile:focus-visible{
outline: 2px solid rgba(216, 201, 180, .90);
outline-offset: 2px;
}
.cottonia-tile .t{font-weight:600;font-size:15px; letter-spacing:.1px;}
body.rtl .cottonia-tile .t{font-size:14px;font-weight:600;}
/* Slightly larger tap targets */
.cottonia-tile{padding:13px 13px;}
/* Action Center title larger in Arabic */
/* RTL: keep Action Center heading readable without affecting message titles */
body.rtl .cottonia-ac-head{font-size:16px !important;}
body.rtl .cottonia-ac-item-title{font-size:13px !important;}
/* Order stats: prevent stray line-breaks inside values */
.cottonia-grid .cottonia-mid br, .cottonia-grid .cottonia-mid-sm br{display:none !important;}
/* Services mini list (Orders page toggle) with qty + pricing */
.cottonia-svc-list{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px;}
.cottonia-svc-li{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:8px 10px; border:1px dashed rgba(0,0,0,.10); border-radius:14px; background: rgba(0,0,0,.015);}
.cottonia-svc-li .n{font-weight:700; font-size:13px; line-height:1.35;}
.cottonia-svc-li .n .q-inline{margin-inline-start:10px; font-weight:800; opacity:.82;}
.cottonia-svc-li .m{display:inline-flex; align-items:center; gap:10px; white-space:nowrap;}
.cottonia-svc-li .q{font-weight:900; opacity:.8;}
.cottonia-svc-li .p{font-weight:900;}
.cottonia-svc-li .pt{font-weight:900; opacity:.75;}
.cottonia-tile{
align-items:center;
}
/* Keep pill stable on hover (no visual change). */
.cottonia-tile:hover .cottonia-aui-indicator:not(.is-active){
border-color: rgba(0,0,0,.18);
}
/* Actions */
.cottonia-actions{display:flex;gap:8px;flex-wrap:wrap;}
.cottonia-actions a.button,
.cottonia-actions button.button{border-radius:14px !important; padding:10px 14px !important; line-height:1 !important; font-size:14px !important; font-weight:600 !important;}
/* Arabic: keep CTAs closer to surrounding sizes */
body.rtl .cottonia-actions a.button,
body.rtl .cottonia-actions button.button,
html[dir="rtl"] .cottonia-actions a.button,
html[dir="rtl"] .cottonia-actions button.button{font-size:13px !important;}
/* Account content CTAs (chat / view all orders / pay now) - keep readable, not overly bold */
body.woocommerce-account .woocommerce-MyAccount-content a.button,
body.woocommerce-account .woocommerce-MyAccount-content button.button{
font-size:14px !important;
font-weight:550 !important;
}
body.rtl.woocommerce-account .woocommerce-MyAccount-content a.button,
body.rtl.woocommerce-account .woocommerce-MyAccount-content button.button{font-size:13px !important;}
html[dir='rtl'] body.woocommerce-account .woocommerce-MyAccount-content a.button,
html[dir='rtl'] body.woocommerce-account .woocommerce-MyAccount-content button.button{
font-size:13px !important;
}
/* Layout */
.cottonia-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
@media(min-width: 760px){
.cottonia-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cottonia-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cottonia-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* Badges */
.cottonia-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.cottonia-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd);border-radius:999px;padding:6px 10px;font-size:12px;background:#fff;color:rgba(0,0,0,.75);}
.cottonia-badge.primary{background:rgba(0,0,0,.06);}
.cottonia-badge--toggle{cursor:pointer;}
/* Services badge hover: use an independent accent (not the site theme color) */
.cottonia-badge--toggle:hover{
background: rgba(64,120,255,.10);
border-color: rgba(64,120,255,.35);
color: rgba(35,80,210,.95);
}
.cottonia-badge--toggle[aria-expanded="true"],
.cottonia-badge--toggle.is-active,
.cottonia-badge--toggle.is-open{
background: rgba(64,120,255,.12);
border-color: rgba(64,120,255,.40);
/* Keep text readable (do NOT turn white when open). */
color: rgba(35,80,210,.95) !important;
}
.cottonia-badge--toggle:active{transform:translateY(1px);}
.cottonia-badge--toggle:active{color: rgba(35,80,210,.95) !important;} /* avoid white text on active */
.cottonia-badge--toggle:focus{outline:2px solid rgba(90,70,53,.35); outline-offset:2px;}
/* Fix theme focus/active overrides (some themes set button text to white on focus) */
button.cottonia-badge--toggle:focus,
button.cottonia-badge--toggle:focus-visible,
.cottonia-content-card button.cottonia-badge--toggle:focus,
.cottonia-content-card button.cottonia-badge--toggle:focus-visible{
background: rgba(64,120,255,.12) !important;
border-color: rgba(64,120,255,.40) !important;
color: rgba(35,80,210,.95) !important;
-webkit-text-fill-color: rgba(35,80,210,.95) !important;
}
/* Services list (revealed after clicking the services badge) */
.cottonia-order-services{
margin-top: 10px;
padding: 12px 14px;
background: #fff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 16px;
box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.cottonia-order-services ul{margin:0; padding:0 0 0 18px;}
body.rtl .cottonia-order-services ul{padding:0 18px 0 0;}
.cottonia-order-services li{margin:6px 0;}
.cottonia-order-services .woocommerce-Price-amount.amount{
font-size: 13px;
}
.cottonia-mini{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.cottonia-mini .cottonia-badge{background:rgba(0,0,0,.02);}
html[dir='rtl'] .cottonia-badges{justify-content:flex-start;}
/* Totals rows (Subtotal/Total) */
.cottonia-kv{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.cottonia-kv-k{
font-size:15px;
font-weight:900;
color:rgba(0,0,0,.72);
}
.cottonia-kv-v{
font-size:13px;
font-weight:950;
color:rgba(0,0,0,.92);
text-align:end;
white-space:nowrap;
}
/* Sub-status subtle flash */
.secondary-flash{
position:relative;
background: rgba(0,0,0,.03);
animation: cottoniaFlash 1.6s ease-in-out infinite;
}
@keyframes cottoniaFlash{
0%,100%{ box-shadow: 0 0 0 rgba(0,0,0,0); }
50%{ box-shadow: 0 0 0 6px rgba(0,0,0,.06); }
}
/* NOTE: Do not disable .secondary-flash on reduced motion because iOS Safari
can report reduce-motion unexpectedly, hiding important order status feedback. */
/* Order details headings hierarchy (Billing/Shipping etc.) */
body.woocommerce-account .woocommerce-column__title,
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-order-downloads__title{
font-size:15px !important;
font-weight:650 !important;
margin-bottom:10px !important;
}
/* Arabic: headings a touch larger for readability */
body.rtl.woocommerce-account .woocommerce-column__title,
body.rtl.woocommerce-account .woocommerce-order-details__title,
body.rtl.woocommerce-account .woocommerce-order-downloads__title{
font-size:16px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content p,
body.woocommerce-account .woocommerce-MyAccount-content li{
font-size:14px !important;
line-height:1.55 !important;
}
/* Orders */
.cottonia-orders{display:grid;gap:12px;}
.cottonia-order-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start;}
.cottonia-order-id{font-weight:700;font-size:14px;}
.cottonia-order-meta{font-size:13px;color:var(--muted);}
/* Arabic: make order number + date clearly readable */
body.rtl .cottonia-order-id{font-size:17px; font-weight:750;}
body.rtl .cottonia-order-meta{font-size:14px;}
/* Order items typography */
body.woocommerce-account .woocommerce-table--order-details td,
body.woocommerce-account .woocommerce-table--order-details th{
font-size:14px !important;
}
body.woocommerce-account .woocommerce-table--order-details .product-name a{
font-size:15px !important;
font-weight:650 !important;
}
body.rtl.woocommerce-account .woocommerce-table--order-details td{
font-size:15px !important; /* Arabic contents +1 */
}
/* Title icon (Recent orders) */
.cottonia-recent-orders-title{display:inline-flex;align-items:center;gap:8px;}
.cottonia-title-ico{
width:18px;height:18px;display:inline-block;flex:0 0 18px;
background-size:contain;background-repeat:no-repeat;background-position:center;
opacity:.85;
/* simple "bag" svg */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6 7h12l1 14H5L6 7Z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 10v2M15 10v2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Orders list: subtle alternating border colors */
.cottonia-orders .cottonia-card{
border-left: 4px solid rgba(0,0,0,.08);
}
.cottonia-orders .cottonia-card:nth-child(odd){
border-left-color: rgba(0,0,0,.10);
}
.cottonia-orders .cottonia-card:nth-child(even){
border-left-color: rgba(0,0,0,.16);
}
/* RTL: use right border instead */
body.rtl .cottonia-orders .cottonia-card,
html[dir="rtl"] .cottonia-orders .cottonia-card{
border-left: 1px solid var(--bd);
border-right: 4px solid rgba(0,0,0,.08);
}
body.rtl .cottonia-orders .cottonia-card:nth-child(odd),
html[dir="rtl"] .cottonia-orders .cottonia-card:nth-child(odd){
border-right-color: rgba(0,0,0,.10);
}
body.rtl .cottonia-orders .cottonia-card:nth-child(even),
html[dir="rtl"] .cottonia-orders .cottonia-card:nth-child(even){
border-right-color: rgba(0,0,0,.16);
}
/* Items */
.cottonia-items{display:grid;gap:10px;}
.cottonia-item{border:1px solid var(--bd);border-radius:16px;padding:12px;background:rgba(0,0,0,.02);}
.cottonia-item.is-alt{background:rgba(0,0,0,.028);border-color:rgba(0,0,0,.12);}
.cottonia-item-top{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;}
.cottonia-item-row{display:flex;gap:12px;align-items:flex-start;}
.cottonia-item-thumb{width:76px;height:76px;border-radius:14px;object-fit:cover;flex:0 0 auto;border:1px solid var(--bd);background:#fff;}
.cottonia-item-main{flex:1 1 auto;min-width:200px;}
.cottonia-item-name{font-weight:950;font-size:13px;}
.cottonia-item-meta{font-size:12px;color:var(--muted);}
/* Removed: .cottonia-price heavy weight caused overly bold prices */
.cottonia-product-link{color: rgba(0,0,0,.92) !important; font-weight:950; text-decoration:none !important;}
.cottonia-product-link:hover{opacity:.85; text-decoration:none !important;}
.cottonia-product-sub{margin-top:6px;font-size:12px;color: rgba(0,0,0,.62);line-height:1.35;font-weight:700;}
/* Remove underline from all links in UI */
.cottonia-aui a,
.cottonia-aui a:hover,
.cottonia-aui a:focus,
.cottonia-aui a:active{ text-decoration:none !important; }
/* =========================
Auth (Card width + Tabs + Form)
========================= */
/* Make auth card compact on desktop */
.cottonia-auth-card{
max-width: 460px;
margin: 28px auto 0;
padding:24px;
border-radius:28px;
}
.cottonia-auth-title{
margin: 0 0 14px;
text-align:center;
font-size:22px;
line-height:1.25;
font-weight:800;
}
/* Disabled registration message (bullets + links) */
.cottonia-bullets{
margin: 0;
padding: 0 18px;
display: grid;
gap: 6px;
}
.cottonia-auth-links{
margin-top: 14px;
display:flex;
justify-content:center;
gap: 10px;
flex-wrap:wrap;
}
.cottonia-auth-links .button{
/* Make the links feel consistent with tabs (not oversized). */
min-width: 0 !important;
width: auto;
padding: 10px 14px !important;
font-size: 13px;
line-height: 1;
display:inline-flex;
align-items:center;
justify-content:center;
}
@media (max-width: 420px){
.cottonia-auth-links{ gap: 8px; }
.cottonia-auth-links .button{ flex: 1 1 0; }
}
/* On very small screens, use most of the viewport width */
@media (max-width: 420px){
.cottonia-auth-card{
max-width: 92vw;
margin-top: 18px;
}
}
/* Tabs */
.cottonia-auth-tabs{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-bottom:44px;
flex-wrap:wrap;
}
.cottonia-tab{
appearance:none;
-webkit-appearance:none;
border:1px solid var(--bd);
background: rgba(0,0,0,.02);
color: rgba(0,0,0,.78);
border-radius: 999px;
padding:10px 16px;
font-weight: 950;
font-size: 13px;
line-height: 1;
cursor:pointer;
user-select:none;
text-align:center;
min-width: 0;
flex: 1 1 140px;
max-width: 200px;
transform: translateY(0);
will-change: transform;
transition:
background .15s ease,
border-color .15s ease,
transform .12s ease,
color .15s ease;
}
.cottonia-tab:hover{
background: rgba(0,0,0,.04);
border-color: rgba(0,0,0,.18);
transform: translateY(-1px);
}
.cottonia-tab.active{
background:#fff;
color: rgba(0,0,0,.92);
border-color: rgba(0,0,0,.22);
transform: translateY(-1px);
}
.cottonia-tab:focus-visible{
outline: none;
box-shadow: 0 0 0 4px rgba(0,0,0,.08);
}
@media (max-width: 420px){
.cottonia-auth-tabs{ gap:8px; }
.cottonia-tab{
/* Keep tabs side-by-side on phone for a true "tab" feel */
flex: 1 1 0;
max-width: none;
padding: 10px 12px;
}
}
/* Auth headings + form spacing inside auth card only */
.cottonia-auth-card h3{
text-align:center;
margin: 0 0 16px;
}
.cottonia-auth-card form{
display:grid;
gap:12px;
}
.cottonia-auth-card .form-row{
margin:0 !important;
}
.cottonia-auth-card label{
font-size:12px;
font-weight:800;
margin-bottom:4px;
display:block;
}
/* Inputs inside auth */
.cottonia-auth-card .input-text{
height:44px;
border-radius:14px;
padding:10px 12px;
font-size:13px;
}
/* Remember me row */
.cottonia-auth-card .form-row label input[type="checkbox"]{
transform: translateY(1px);
}
/* Auth actions button */
.cottonia-auth-card .cottonia-actions{
justify-content:center;
margin-top:6px;
}
.cottonia-auth-card .cottonia-actions .button{
min-width:160px;
padding:12px 18px !important;
font-weight:900;
position:relative;
}
.cottonia-auth-card .cottonia-actions .button[disabled]{
opacity:.92;
cursor:wait;
}
.cottonia-auth-card .cottonia-actions .button[disabled]::after{
content:"";
width:14px;
height:14px;
border-radius:999px;
border:2px solid currentColor;
border-inline-end-color:transparent;
display:inline-block;
vertical-align:-2px;
margin-inline-start:8px;
animation:cottonia-auth-spin .7s linear infinite;
}
@keyframes cottonia-auth-spin{to{transform:rotate(360deg);}}
/* Auth live status pill */
.cottonia-auth-card .cottonia-auth-status{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
max-width:100%;
min-height:42px;
padding:10px 14px;
margin:10px 0 14px;
border-radius:16px;
text-align:center;
font-size:13px;
font-weight:800;
line-height:1.45;
border:1px solid rgba(15, 23, 42, .10);
background:rgba(15, 23, 42, .04);
color:rgba(15, 23, 42, .86);
box-sizing:border-box;
}
.cottonia-auth-card .cottonia-auth-status[hidden]{ display:none !important; }
.cottonia-auth-card .cottonia-auth-status::before{
content:"";
width:8px;
height:8px;
border-radius:999px;
background:currentColor;
flex:0 0 auto;
opacity:.75;
}
.cottonia-auth-card .cottonia-auth-status.is-loading{
border-color:rgba(180, 83, 9, .18);
background:rgba(245, 158, 11, .12);
color:rgba(146, 64, 14, .95);
}
.cottonia-auth-card .cottonia-auth-status.is-success{
border-color:rgba(5, 150, 105, .20);
background:rgba(16, 185, 129, .12);
color:rgba(4, 120, 87, .96);
}
.cottonia-auth-card .cottonia-auth-status.is-error{
border-color:rgba(220, 38, 38, .22);
background:rgba(220, 38, 38, .08);
color:rgba(153, 27, 27, .96);
}
/* Alerts inside auth */
/* Auth Alerts: clearer error style */
.cottonia-auth-card .cottonia-alert{
display:block;
width:100%;
box-sizing:border-box;
text-align:center;
font-size:13px;
line-height:1.45;
border-radius:14px;
padding:12px 12px;
border:1px solid rgba(220, 38, 38, .25); /* red-ish border */
background: rgba(220, 38, 38, .06); /* soft red bg */
color: rgba(153, 27, 27, .95); /* readable red text */
}
/* Add a small icon-like dot */
.cottonia-auth-card .cottonia-alert::before{
content:"";
display:inline-block;
width:8px;height:8px;
border-radius:999px;
background: rgba(220, 38, 38, .55);
margin-inline-end:10px;
transform: translateY(-1px);
}
.cottonia-auth-card .cottonia-alert.is-success{
border-color:rgba(5, 150, 105, .20);
background:rgba(16, 185, 129, .10);
color:rgba(4, 120, 87, .96);
}
.cottonia-auth-card .cottonia-alert.is-success::before{
background:rgba(5, 150, 105, .55);
}
.cottonia-auth-card .cottonia-alert.is-error{
border-color:rgba(220, 38, 38, .25);
background:rgba(220, 38, 38, .06);
color:rgba(153, 27, 27, .95);
}
/* Disabled registration alert contains its own bullets; remove the leading dot */
.cottonia-auth-card .cottonia-reg-disabled::before{ display:none; }
/* Action Center Rotator */
.cottonia-ac{position:relative; min-height:140px;}
.cottonia-ac-slide[hidden]{display:none !important;}
.cottonia-ac-head{
font-weight:700;
font-size:14px;
display:flex;
align-items:center;
gap:8px;
color: rgba(60, 44, 34, .82);
}
/* Message title inside Action Center (keep smaller than the heading) */
.cottonia-ac-item-title{
font-weight:650;
font-size:13px;
margin: 2px 0 6px;
color: rgba(60, 44, 34, .78);
}
.cottonia-ac-icon{
width:18px;height:18px;display:inline-block;flex:0 0 auto;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
opacity:.9;
}
/* Section titles (Order page) */
.cottonia-sec-title{
margin:0 0 10px;
font-weight:700;
font-size:14px;
display:flex;
align-items:center;
gap:8px;
color: rgba(60, 44, 34, .86);
}
.cottonia-sec-icon{
width:18px;height:18px;display:inline-block;flex:0 0 auto;
background: currentColor;
opacity:.92;
}
.cottonia-ico-services{
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.cottonia-ico-summary{
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* WCPC Chat icon injected by app.js (span.cottonia-ico-chat) */
.cottonia-ico-chat{
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* Space between WCPC chat icon and title */
.cottonia-ico-chat{ margin-inline-end: 8px; }
.cottonia-ico-products{
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.cottonia-ac{
overflow: hidden;
}
.cottonia-ac-slide{
transition: opacity .18s ease, transform .18s ease;
}
/* Action Center Dots */
.cottonia-ac-dots{
display:flex;
gap:8px;
justify-content:center;
align-items:center;
margin-top:12px;
}
.cottonia-dot{
width:8px;
height:8px;
border-radius:999px;
border:1px solid rgba(0,0,0,.25);
background: rgba(0,0,0,.10);
padding:0;
cursor:pointer;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.cottonia-dot:hover{ transform: scale(1.15); }
.cottonia-dot.is-active{
background: rgba(0,0,0,.35);
border-color: rgba(0,0,0,.35);
}
@media (prefers-reduced-motion: reduce){
.cottonia-dot{ transition:none; }
}
/* Dashboard grid: Action Center wider than Orders */
.cottonia-grid.cols-dashboard{
display:grid;
gap:12px;
}
/* Dashboard cards (the top 4 cards): slightly larger titles */
.cottonia-grid.cols-dashboard .cottonia-card h3{
font-size:18px;
font-weight:650;
}
body.rtl .cottonia-grid.cols-dashboard .cottonia-card h3{
font-size:17px;
}
@media(min-width:760px){
.cottonia-grid.cols-dashboard{
grid-template-columns: 1.6fr 3.4fr; /* Orders | Action Center (wider action center) */
}
}
/* Optional: make Orders card a bit more compact */
.cottonia-grid.cols-dashboard > .cottonia-card:first-child{
padding:12px;
}
/* Unread message icon (rect style + pulse from the rectangle) */
.cottonia-msgicon{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:26px;
margin-inline-start:10px;
background: rgba(59,130,246,.08);
border:1px solid rgba(59,130,246,.25);
border-radius:12px; /* مستطيل ناعم مثل التصميم */
text-decoration:none !important;
/* pulse effect from the rectangle */
animation: cottoniaMsgPulseRect 1.6s ease-in-out infinite;
transform: translateY(2px);
}
.cottonia-msgicon svg{
width:15px;
height:15px;
fill: rgba(59,130,246,.95);
}
.cottonia-msgicon:hover{ opacity:.9; }
@keyframes cottoniaMsgPulseRect{
0%,100%{ box-shadow: 0 0 0 0 rgba(59,130,246,.0); }
50%{ box-shadow: 0 0 0 8px rgba(59,130,246,.10); } /* وميض حول المستطيل */
}
@media (prefers-reduced-motion: reduce){
.cottonia-msgicon{ animation:none; }
}
/* WooCommerce archive (shop/category) card: tighter inner top spacing */
body.post-type-archive-product .cottonia-content-card--wc .cottonia-content-card__inner,
body.tax-product_cat .cottonia-content-card--wc .cottonia-content-card__inner,
body.tax-product_tag .cottonia-content-card--wc .cottonia-content-card__inner{
padding-top: 0px !important;
padding-bottom: 12px !important;
}
/* Archive: reduce title/breadcrumb spacing inside the card */
body.post-type-archive-product .cottonia-content-card--wc .woocommerce-products-header,
body.tax-product_cat .cottonia-content-card--wc .woocommerce-products-header,
body.tax-product_tag .cottonia-content-card--wc .woocommerce-products-header{
padding-top: 0 !important;
margin-top: 0 !important;
}
body.post-type-archive-product .cottonia-content-card--wc .woocommerce-products-header .woocommerce-products-header__title,
body.tax-product_cat .cottonia-content-card--wc .woocommerce-products-header .woocommerce-products-header__title,
body.tax-product_tag .cottonia-content-card--wc .woocommerce-products-header .woocommerce-products-header__title{
margin-top: 4px !important;
margin-bottom: 10px !important;
}
/* Do not force-hide breadcrumbs. */
/* Single product card: a bit more inner top, but less outer gap */
body.single-product .cottonia-content-card--product{
padding-top: 6px !important;
padding-bottom: 6px !important;
}
body.single-product .cottonia-content-card--product .cottonia-content-card__inner{
/* Tighter inner start spacing */
padding-top: 30px !important;
}
/* Keep breadcrumbs separated from the product image */
body.single-product .cottonia-content-card--product .woocommerce-breadcrumb,
body.single-product .cottonia-content-card--product nav.woocommerce-breadcrumb{
margin-bottom: 10px !important;
}
/* Single product: breadcrumbs spacing inside the card */
body.single-product .cottonia-content-card--product .woocommerce-breadcrumb,
body.single-product .cottonia-content-card--product .woocommerce-breadcrumbs,
body.single-product .cottonia-content-card--product .cottonia-breadcrumbs{
margin-bottom: 10px !important;
}
/* Single product: tighten the gap from header */
body.single-product .site-content,
body.single-product .content-area{
padding-top: 0 !important;
}
/* Pay-for-order summary (coupon + billing) */
body.woocommerce-order-pay .cottonia-payorder-summary{
margin: 0 0 16px 0;
padding: 14px;
border: 1px solid rgba(0,0,0,.10);
border-radius: 16px;
background: rgba(0,0,0,.02);
}
/* Summary note + section styling */
body.woocommerce-order-pay .cottonia-payorder-summary__note{
font-size: 14px;
font-weight: 600;
color: rgba(0,0,0,.75);
line-height: 1.6;
}
body.woocommerce-order-pay .cottonia-payorder-summary__divider{
border: 0;
border-top: 1px solid rgba(0,0,0,.10);
margin: 12px 0;
}
body.woocommerce-order-pay .cottonia-payorder-summary__section-title{
font-size: 13px;
font-weight: 900;
letter-spacing: .3px;
text-transform: uppercase;
color: rgba(0,0,0,.55);
margin: 0 0 10px 0;
}
body.woocommerce-order-pay .cottonia-payorder-summary__text{
font-size: 14px;
color: rgba(0,0,0,.82);
}
body.woocommerce-order-pay .cottonia-payorder-summary__empty{
opacity: .75;
}
body.woocommerce-order-pay .cottonia-payorder-summary__header{
margin-bottom: 10px;
}
body.woocommerce-order-pay .cottonia-payorder-summary__headline{
font-weight: 900;
font-size: 16px;
line-height: 1.2;
}
body.woocommerce-order-pay .cottonia-payorder-summary__sub{
font-weight: 600;
opacity: .8;
margin-top: 4px;
}
body.woocommerce-order-pay .cottonia-payorder-summary__status{
margin-top: 6px;
font-size: 13px;
opacity: .8;
}
/* Order-pay: keep cards width aligned with content */
body.woocommerce-order-pay form#order_review{
max-width: 720px;
margin: 0 auto;
}
body.woocommerce-order-pay form#order_review table.shop_table{
width: 100% !important;
}
/* Lightbox for checkout thumbnails */
.cottonia-aui-lightbox{
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 999999;
}
.cottonia-aui-lightbox.is-open{ display:flex; }
.cottonia-aui-lightbox__img{
max-width: min(920px, 96vw);
max-height: 90vh;
width: auto;
height: auto;
border-radius: 16px;
box-shadow: 0 30px 80px rgba(0,0,0,.35);
background: #fff;
}
.cottonia-aui-lightbox__close{
position:absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(0,0,0,.35);
color: #fff;
display:flex;
align-items:center;
justify-content:center;
font-size: 22px;
cursor: pointer;
}
body.woocommerce-order-pay .cottonia-payorder-summary__title{
font-weight: 700;
color: rgba(0,0,0,.72);
margin-bottom: 8px;
}
body.woocommerce-order-pay .cottonia-payorder-summary__list{
margin: 0;
padding-left: 18px;
}
body.woocommerce-order-pay .cottonia-payorder-summary__code{
display: inline;
padding: 0;
border-radius: 0;
border: 0;
background: transparent;
font-weight: 700;
font-size: 13px;
}
/* Order-pay header (Order # + status line) */
body.woocommerce-order-pay .cottonia-payorder-header{
margin: 0 0 14px 0;
}
body.woocommerce-order-pay .cottonia-payorder-header__headline{
font-weight: 700;
font-size: 17px;
margin: 0 0 4px 0;
}
body.woocommerce-order-pay .cottonia-payorder-header__sub{
font-weight: 700;
font-size: 14px;
color: rgba(0,0,0,.72);
margin: 0 0 6px 0;
}
body.woocommerce-order-pay .cottonia-payorder-header__status{
color: rgba(0,0,0,.68);
font-weight: 600;
}
body.woocommerce-order-pay .cottonia-payorder-summary__addr{
line-height: 1.5;
}
/* Order-pay: match card width with review content */
body.woocommerce-order-pay .cottonia-content-card__inner{
max-width: 860px !important;
}
/* Card 4 (Duration) slightly smaller */
.cottonia-mid.is-small{font-size:15px;line-height:1.25}
/* WCPC timeline inside item card (smaller) */
.wcpc-timeline-inline-wrap{margin-top:6px;font-size:12px;line-height:1.35;opacity:.92}
/* WCPC addon base link inside item card */
.wcpc-addon-base-link-inline-wrap{margin-top:6px;font-size:12px;line-height:1.35;opacity:.92}
/* Item index badge */
.cottonia-item-idx{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:7px;background:rgba(0,0,0,.06);font-weight:700;font-size:11px;margin-inline-end:8px;flex:0 0 auto;}
/* Breadcrumb card on services/products */
/* Mobile: spacing tweaks inside My Account templates only */
@media (max-width: 768px){
body.woocommerce-account .cottonia-sec-title{ margin-top: 10px; }
}
/* Info popover (order duration) */
.cottonia-card.has-info{position:relative;}
.cottonia-info-btn{
position:absolute;
top:10px;
inset-inline-end:10px;
width:18px;height:18px;
border-radius:999px;
border:1px solid var(--bd);
background:rgba(0,0,0,.03);
color:rgba(0,0,0,.75);
font-weight:900;
font-size:12px;
line-height:16px;
padding:0;
cursor:pointer;
}
.cottonia-info-btn:focus{outline:2px solid rgba(0,0,0,.25); outline-offset:2px;}
.cottonia-pop{
position:absolute;
top:34px;
inset-inline-end:10px;
width:min(260px, calc(100% - 20px));
border:1px solid var(--bd);
border-radius:14px;
background:#fff;
padding:10px 12px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
z-index:9;
font-size:12px;
color:rgba(0,0,0,.75);
}
.cottonia-pop b{color:rgba(0,0,0,.92);}
/* Services toggle sizing is centralized later (avoid duplicates). */
/* WCPC pinned notice: sizing is centralized later in this file (avoid duplicates). */
/* =====================================================================
Classic WooCommerce Cart/Checkout (Astra or non-Blocks templates)
Fix RTL/LTR desktop alignment to match English layout.
===================================================================== */
/* ==========================================================
Prices (Order cards / WC lists)
==========================================================
Goal: keep product prices compact (not oversized), especially
in Arabic UI where long labels can make prices look huge.
*/
/* Product price in Cottonia lists/cards */
body.cottonia-aui .cottonia-price > span:nth-child(1),
body.cottonia-aui span.woocommerce-Price-amount.amount.aed-left-logo{
font-size:14px !important;
font-weight:750 !important;
}
/* Status badge size (small polish) */
body.cottonia-aui .cottonia-badge.primary{font-size:13px;}
/* ==========================================================
Order Note (icon button + modal)
========================================================== */
.cottonia-order-note-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
height:auto;
border:0;
background:transparent !important;
box-shadow:none !important;
cursor:pointer;
padding:0;
line-height:1;
vertical-align:middle;
margin-inline-start:6px;
color: var(--cottonia-aui-neutral-ink-light, rgba(60,44,34,.50));
appearance:none;
}
/* Add a subtle separator before the note icon. */
.cottonia-order-note-btn::before{
content:"•";
display:inline-block;
color: currentColor;
opacity: .92;
font-weight: 900;
font-size: 15px;
margin-inline-end:9px;
margin-inline-start:3px;
line-height:1;
}
.cottonia-order-note-btn:hover,
.cottonia-order-note-btn:focus,
.cottonia-order-note-btn:active{
background:transparent !important;
box-shadow:none !important;
outline:none !important;
color: var(--cottonia-aui-neutral-hover-ink, rgba(60,44,34,.78));
}
.cottonia-order-note-ico{
/* Draw a clean "note" icon with pure CSS (no SVG/mask) */
display:inline-block;
width:17.8px;
height:20px;
position:relative;
vertical-align:middle;
transform:none;
}
/* Paper shape */
.cottonia-order-note-ico::before{
content:"";
position:absolute;
inset:1px;
border: 1.7px solid currentColor;
border-radius: 3px;
opacity: .95;
}
/* Text lines */
.cottonia-order-note-ico::after{
content:"";
position:absolute;
left:3.2px;
right:3.2px;
top:5px;
height:10px;
background:
linear-gradient(currentColor,currentColor) 0 0 / 100% 1.4px no-repeat,
linear-gradient(currentColor,currentColor) 0 50% / 86% 1.4px no-repeat,
linear-gradient(currentColor,currentColor) 0 100% / 68% 1.4px no-repeat;
opacity: .70;
}
.cottonia-aui-note-modal{
position:fixed;
inset:0;
background: rgba(0,0,0,.35);
display:none;
align-items:center;
justify-content:center;
padding:16px;
z-index: 99999;
}
.cottonia-aui-note-modal.is-open{display:flex;}
.cottonia-aui-note-modal__card{
width: min(520px, 94vw);
background:#fff;
border-radius: 18px;
border:1px solid rgba(0,0,0,.10);
box-shadow: 0 20px 60px rgba(0,0,0,.18);
overflow:hidden;
}
.cottonia-aui-note-modal__head{
position: relative;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding: 14px 16px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.cottonia-aui-note-modal__title{font-weight:800; font-size:15px; text-align:center;}
.cottonia-aui-note-modal__close{
position:absolute;
top: 10px;
right: 10px;
width:28px;
height:28px;
border-radius: 10px;
border:0;
background: transparent;
cursor:pointer;
padding:0;
color: var(--cottonia-aui-neutral-ink, rgba(60,44,34,.75));
}
body.rtl .cottonia-aui-note-modal__close{ right:auto; left:10px; }
.cottonia-aui-note-modal__close:hover{background: var(--cottonia-aui-neutral-hover, rgba(0,0,0,.06));}
.cottonia-aui-note-modal__close::before{
content: '';
display:block;
width: 14px;
height: 14px;
margin: 0 auto;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.cottonia-aui-note-modal__body{padding: 18px 18px 20px;}
.cottonia-aui-note-modal__title{font-weight:850; font-size:16px; text-align:center;}
.cottonia-aui-note-modal__text{
font-size:14px;
line-height:1.75;
white-space:pre-wrap;
text-align:center;
color: rgba(0,0,0,.78);
}
.cottonia-aui-note-modal__card{max-height: min(74vh, 620px);}
.cottonia-aui-note-modal__body{overflow:auto;}
/* Payment methods: keep delete button on same line and make it smaller
Some themes don't add woocommerce-payment-methods body class reliably. */
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content .woocommerce-PaymentMethod,
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content li.woocommerce-PaymentMethod,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethod,
body.woocommerce-account .woocommerce-MyAccount-content li.woocommerce-PaymentMethod{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content .woocommerce-PaymentMethod-actions,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethod-actions{
margin:0;
white-space:nowrap;
}
body.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content .woocommerce-PaymentMethod-actions .button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-PaymentMethod-actions .button{
font-size:12px !important;
padding:6px 10px !important;
line-height:1.15 !important;
border-radius:12px !important;
}
/* Saved payment methods table layout (Woo default template) */
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_payment_methods td.woocommerce-PaymentMethod-method,
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_payment_methods td.woocommerce-PaymentMethod-actions{
vertical-align: middle;
}
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_payment_methods td.woocommerce-PaymentMethod-actions{
text-align: end;
white-space: nowrap;
}
body.woocommerce-account .woocommerce-MyAccount-content table.my_account_payment_methods td.woocommerce-PaymentMethod-actions .button{
font-size:12px !important;
padding:6px 10px !important;
line-height:1.15 !important;
border-radius:12px !important;
}
/* Saved payment methods (Cottonia card layout) - keep delete on the same line as card meta */
.cottonia-payment-token{
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
}
.cottonia-payment-token__meta{
flex: 1 1 auto;
min-width: 0;
}
.cottonia-payment-token__sub{
display:flex;
align-items:center;
gap: 6px;
margin-top: 2px;
}
.cottonia-payment-token__name{
font-weight: 750;
}
.cottonia-payment-token__actions{
flex: 0 0 auto;
margin: 0;
padding: 0;
white-space: nowrap;
}
.cottonia-payment-token__actions .cottonia-payment-token__delete{
font-size:16px !important;
padding:7px 12px !important;
line-height:1.15 !important;
border-radius:12px !important;
}
/* Mini cart: keep View cart button styling consistent in English and Arabic */
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.wc-forward,
.widget_shopping_cart .buttons .button.wc-forward,
.woocommerce.widget_shopping_cart .buttons .button.wc-forward,
.woocommerce-mini-cart__buttons .button.wc-forward{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:40px;
padding:10px 14px !important;
border-radius:14px !important;
border:1px solid rgba(0,0,0,.10) !important;
background:#fff !important;
color:var(--cottonia-aui-ink, #2f2f2f) !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.1 !important;
text-decoration:none !important;
box-shadow:none !important;
}
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.wc-forward:hover,
.widget_shopping_cart .buttons .button.wc-forward:hover,
.woocommerce.widget_shopping_cart .buttons .button.wc-forward:hover,
.woocommerce-mini-cart__buttons .button.wc-forward:hover,
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.wc-forward:focus,
.widget_shopping_cart .buttons .button.wc-forward:focus,
.woocommerce.widget_shopping_cart .buttons .button.wc-forward:focus,
.woocommerce-mini-cart__buttons .button.wc-forward:focus{
background:rgba(0,0,0,.04) !important;
color:var(--cottonia-aui-ink, #2f2f2f) !important;
border-color:rgba(0,0,0,.14) !important;
outline:none !important;
}
/* Mini cart: keep variation/type rows hidden so AR matches EN output */
.widget_shopping_cart .variation,
.widget_shopping_cart_content .variation,
.woocommerce-mini-cart .variation,
.woocommerce-mini-cart-item .variation,
.widget_shopping_cart dl.variation,
.widget_shopping_cart_content dl.variation,
.woocommerce-mini-cart dl.variation,
.woocommerce-mini-cart-item dl.variation{
display:none !important;
}
/* --------------------------------------------------------------------------
Archive product cards
Goal: keep price row height stable even when Woo returns empty price HTML.
--------------------------------------------------------------------------- */
.woocommerce ul.products li.product .price.cottonia-price--placeholder,
.woocommerce-page ul.products li.product .price.cottonia-price--placeholder,
body.post-type-archive-product ul.products li.product .price.cottonia-price--placeholder{
display:inline-flex;
align-items:center;
min-height:1.35em;
font-size:14px;
font-weight:600;
color:#7d8793;
}
/* --------------------------------------------------------------------------
Address cards
Goal: keep the edit action pinned neatly at the bottom of the card.
--------------------------------------------------------------------------- */
.cottonia-address-card{
display:flex;
flex-direction:column;
height:100%;
}
.cottonia-address-card__body{
flex:1 1 auto;
}
.cottonia-address-card__actions{
margin-top:auto !important;
padding-top:14px;
}
.cottonia-address-card__actions .button{
display:inline-flex;
}
/* Quick start helper in Arabic */
body.rtl [data-aui-quickstart="1"]{direction:rtl;text-align:right;}
body.rtl [data-aui-quickstart="1"] *{direction:inherit;}
body.rtl [data-aui-quickstart="1"] button,
body.rtl [data-aui-quickstart="1"] .button{font-size:12px !important;padding:6px 10px !important;}
body.rtl [data-aui-quickstart="1"] [class*="arrow-right"],
body.rtl [data-aui-quickstart="1"] [data-icon*="arrow-right"]{transform:scaleX(-1);}
/* Arabic WCPC heading: slightly smaller than default */
body.rtl .wcpc-title,
body.rtl .wcpc-chat-title,
body.rtl .wcpc__title,
body.rtl .cottonia-sec-title{
font-size:16px !important;
}
/* Quick start helper: reliable Arabic fallback styling */
body.rtl [data-aui-quickstart="1"] .button,
body.rtl [data-aui-quickstart="1"] button,
body.rtl [data-aui-quickstart="1"] input[type="button"],
body.rtl [data-aui-quickstart="1"] input[type="submit"]{
font-size:11px !important;
padding:5px 9px !important;
}
body.rtl [data-aui-quickstart="1"] [class*="arrow-right"],
body.rtl [data-aui-quickstart="1"] [data-icon*="arrow-right"],
body.rtl [data-aui-quickstart="1"] svg[aria-hidden="true"]{
transform:scaleX(-1);
}
/* Pay-for-order: keep the real payment card styles, but neutralize only any accidental outer wrapper. */
body.woocommerce-order-pay > .cottonia-content-card,
body.woocommerce-order-pay .site-main > .cottonia-content-card:not(.cottonia-content-card--checkout){
background:transparent !important;
box-shadow:none !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
}
body.woocommerce-order-pay .woocommerce-checkout-payment,
body.woocommerce-order-pay #payment,
body.woocommerce-order-pay form#order_review{
background:#fff !important;
border:1px solid var(--cottonia-aui-line, rgba(60,44,34,.12)) !important;
border-radius:22px !important;
box-shadow:0 10px 30px rgba(0,0,0,.05) !important;
}
body.woocommerce-order-pay form#order_review{
padding:14px !important;
}
body.woocommerce-order-pay .woocommerce-checkout-payment,
body.woocommerce-order-pay #payment{
padding:14px !important;
margin-top:16px !important;
}
/* Admin: drag-drop My Account menu rows */
.cottonia-aui-menu-table .cottonia-sort-handle{cursor:grab;font-size:18px;line-height:1;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #ddd;border-radius:8px;background:#fff;}
.cottonia-aui-menu-table tr.is-dragging{opacity:.65;background:#faf7f2;}
.cottonia-aui-menu-table td.cottonia-col-pos{display:none;}
/* Order-pay inner card title */
body.woocommerce-order-pay .cottonia-payorder-page-title{
font-size:28px;
font-weight:700;
line-height:1.2;
color:#2f2f2f;
text-align:right;
margin:0 0 14px;
}
html[dir="rtl"] body.woocommerce-order-pay .cottonia-payorder-page-title,
body.rtl.woocommerce-order-pay .cottonia-payorder-page-title{
text-align:center;
}
body.woocommerce-order-pay .cottonia-checkout-type{
display:none !important;
}
/* Order-pay: hide any extra outer page title and keep only the inner card title */
body.woocommerce-order-pay .entry-title,
body.woocommerce-order-pay .post-title,
body.woocommerce-order-pay .page-title,
body.woocommerce-order-pay .ast-archive-title,
body.woocommerce-order-pay .woocommerce-products-header,
body.woocommerce-order-pay .woocommerce-products-header__title{
display:none !important;
}
/* Order-pay: slightly wider inner card */
body.woocommerce-order-pay .cottonia-content-card__inner{
max-width: 940px !important;
}
/* Order-pay: center the review table contents without affecting other pages */
body.woocommerce-order-pay.woocommerce-js table.shop_table{
text-align:center;
}
body.woocommerce-order-pay.woocommerce-js table.shop_table th,
body.woocommerce-order-pay.woocommerce-js table.shop_table td{
text-align:center;
vertical-align:middle;
}
body.woocommerce-order-pay.woocommerce-js table.shop_table .product-thumbnail img,
body.woocommerce-order-pay.woocommerce-js table.shop_table img{
margin-inline:auto;
}
.cottonia-auth-extra-link{ text-align:center; font-size:13px; margin-top:2px; }
.cottonia-auth-extra-link a{ text-decoration:none !important; }
.cottonia-auth-card [data-cottonia-panel][hidden]{ display:none !important; }
/* Payment methods helper note */
.cottonia-payment-methods-note{
display:block;
width:100%;
margin:0 0 14px;
padding:12px 14px;
border-radius:12px;
background:rgba(0,0,0,.035);
color:var(--muted);
font-size:14px;
line-height:1.6;
}
.cottonia-payment-methods-note--empty{
margin-bottom:10px;
}
html[dir="rtl"] .cottonia-payment-methods-note,
body.rtl .cottonia-payment-methods-note{
text-align:right;
}
/* Thank you / Order received page: match content-card layout used across the UI */
body.woocommerce-order-received .cottonia-content-card--thankyou,
body.woocommerce-checkout.woocommerce-order-received .cottonia-content-card--thankyou,
body.woocommerce-page.woocommerce-order-received .cottonia-content-card--thankyou{
max-width: 980px;
margin: 18px auto 28px !important;
}
body.woocommerce-order-received .cottonia-content-card--thankyou > .cottonia-content-card__inner{
padding: 22px 22px 26px !important;
}
body.woocommerce-order-received .woocommerce-order,
body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details{
max-width: 100%;
}
body.woocommerce-order-received .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .wcpc-order-timeline,
body.woocommerce-order-received .cottonia-order-timeline,
body.woocommerce-order-received .timeline,
body.woocommerce-order-received .order-timeline{
background: #fff;
border: 1px solid var(--cottonia-aui-line, rgba(60,44,34,.12));
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
body.woocommerce-order-received .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received{
padding: 16px 18px;
margin: 0 auto 18px;
max-width: 520px;
text-align: center;
}
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details{
padding: 0 0 18px;
overflow: hidden;
margin-bottom: 18px;
}
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title{
padding: 18px 20px;
margin: 0 !important;
border-bottom: 1px solid var(--cottonia-aui-line, rgba(60,44,34,.10));
font-size: 22px;
font-weight: 700;
}
body.woocommerce-order-received .woocommerce-order-details .shop_table,
body.woocommerce-order-received .woocommerce-table--order-details,
body.woocommerce-order-received .woocommerce-customer-details address{
margin: 0;
}
body.woocommerce-order-received .woocommerce-order-details .shop_table,
body.woocommerce-order-received .woocommerce-table--order-details{
border: 0 !important;
border-radius: 0 !important;
}
body.woocommerce-order-received .woocommerce-order-details .shop_table th,
body.woocommerce-order-received .woocommerce-order-details .shop_table td{
padding: 14px 16px !important;
vertical-align: middle;
}
body.woocommerce-order-received .woocommerce-order-details .product-thumbnail img,
body.woocommerce-order-received .woocommerce-order-details .shop_table img{
border-radius: 14px;
}
body.woocommerce-order-received .woocommerce-customer-details address{
padding: 18px 20px;
font-style: normal;
line-height: 1.7;
}
body.woocommerce-order-received .woocommerce-order-details .wc-item-meta,
body.woocommerce-order-received .woocommerce-order-details .wc-item-meta li,
body.woocommerce-order-received .woocommerce-order-details .wc-item-meta p{
font-size: 13px;
}
body.rtl.woocommerce-order-received .woocommerce-order-details__title,
body.rtl.woocommerce-order-received .woocommerce-column__title,
html[dir="rtl"] body.woocommerce-order-received .woocommerce-order-details__title,
html[dir="rtl"] body.woocommerce-order-received .woocommerce-column__title{
text-align: right;
}
html[dir="rtl"] body.woocommerce-order-received .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received,
body.rtl.woocommerce-order-received .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received{
text-align: center;
margin-right: auto;
margin-left: auto;
}
@media (max-width: 767px){
body.woocommerce-order-received .cottonia-content-card--thankyou > .cottonia-content-card__inner{
padding: 16px 14px 18px !important;
} body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title{
font-size: 18px;
padding: 14px 14px;
}
body.woocommerce-order-received .woocommerce-customer-details address,
body.woocommerce-order-received .woocommerce-order-details .shop_table th,
body.woocommerce-order-received .woocommerce-order-details .shop_table td{
padding: 12px 12px !important;
}
}
/* Order received page: remove outer duplicate title and refine inner card layout */
body.woocommerce-order-received .entry-title,
body.woocommerce-order-received .post-title,
body.woocommerce-order-received .page-title,
body.woocommerce-order-received .ast-archive-title,
body.woocommerce-order-received .woocommerce-products-header,
body.woocommerce-order-received .woocommerce-products-header__title{
display:none !important;
}
body.woocommerce-order-received .cottonia-content-card--thankyou .cottonia-content-card__header{
margin: 0 0 18px !important;
}
body.woocommerce-order-received .cottonia-content-card--thankyou .cottonia-content-card__title,
body.rtl.woocommerce-order-received .cottonia-content-card--thankyou .cottonia-content-card__title,
html[dir="rtl"] body.woocommerce-order-received .cottonia-content-card--thankyou .cottonia-content-card__title{
text-align:center !important;
}
body.rtl.woocommerce-order-received .woocommerce-order-details__title,
html[dir="rtl"] body.woocommerce-order-received .woocommerce-order-details__title,
body.rtl.woocommerce-order-received .woocommerce-column__title,
html[dir="rtl"] body.woocommerce-order-received .woocommerce-column__title{
text-align:center;
}
@media (max-width: 767px){}
/* Order received summary strip: increase height and breathing room without forcing grid */
body.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details{
margin: 0 0 18px !important;
padding: 0 !important;
display: flex;
flex-wrap: wrap;
align-items: stretch;
overflow: hidden;
}
body.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li{
min-height: 76px;
padding: 16px 18px !important;
display: flex;
flex-direction: column;
justify-content: center;
}
body.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li strong{
display: block;
margin-top: 6px;
line-height: 1.45;
}
@media (max-width: 767px){
body.woocommerce-order-received ul.woocommerce-order-overview.woocommerce-thankyou-order-details li{
min-height: 68px;
padding: 14px 14px !important;
}
}
/* Notifications endpoint: make option titles clearer than their descriptions */
body.woocommerce-account .cottonia-notifications-preferences label,
body.woocommerce-account .cottonia-notifications-preferences legend,
body.woocommerce-account .cottonia-notifications-preferences .wcpc-option-title,
body.woocommerce-account .cottonia-notifications-preferences .option-title,
body.woocommerce-account .cottonia-notifications-preferences .setting-title,
body.woocommerce-account .cottonia-notifications-preferences .notification-title,
body.woocommerce-account .cottonia-notifications-preferences .title,
body.woocommerce-account .cottonia-notifications-preferences .name{
font-weight: 600 !important;
}
body.woocommerce-account .cottonia-notifications-preferences .description,
body.woocommerce-account .cottonia-notifications-preferences .desc,
body.woocommerce-account .cottonia-notifications-preferences .help,
body.woocommerce-account .cottonia-notifications-preferences .hint,
body.woocommerce-account .cottonia-notifications-preferences small,
body.woocommerce-account .cottonia-notifications-preferences p{
font-weight: 400;
color: rgba(0,0,0,.68);
}
body.woocommerce-account .cottonia-notifications-preferences label{
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
}
body.woocommerce-account .cottonia-notifications-preferences .form-row,
body.woocommerce-account .cottonia-notifications-preferences .wcpc-notification-row,
body.woocommerce-account .cottonia-notifications-preferences .notification-row,
body.woocommerce-account .cottonia-notifications-preferences .option-row{
margin-bottom: 12px;
}
/* Track order tab + checkout guest prompt */
.cottonia-track-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 6px;}
.cottonia-track-mode{appearance:none;border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:14px;padding:10px 12px;font-size:13px;font-weight:700;cursor:pointer;line-height:1.4;}
.cottonia-track-mode.is-active{border-color:rgba(15,23,42,.28);background:rgba(15,23,42,.05);}
.cottonia-checkout-auth-links{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;}
.cottonia-checkout-auth-links a{text-decoration:none !important;font-weight:700;}
.cottonia-guest-checkout-modal[hidden]{display:none !important;}
.cottonia-guest-checkout-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;}
.cottonia-guest-checkout-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);}
.cottonia-guest-checkout-modal__dialog{position:relative;z-index:1;width:min(100%,430px);background:#fff;border-radius:28px;padding:26px 22px 22px;box-shadow:0 20px 60px rgba(15,23,42,.22);text-align:center;}
.cottonia-guest-checkout-modal__close{position:absolute;top:12px;inset-inline-end:12px;border:none;background:transparent;font-size:28px;line-height:1;cursor:pointer;padding:6px;color:#111827;}
.cottonia-guest-checkout-modal__title{font-size:22px;font-weight:800;line-height:1.3;margin:0 0 10px;}
.cottonia-guest-checkout-modal__text{font-size:14px;line-height:1.7;color:rgba(17,24,39,.78);margin:0 0 18px;}
.cottonia-guest-checkout-modal__actions{display:grid;gap:10px;}
.cottonia-guest-checkout-modal__actions .button{width:100%;justify-content:center;}
/* Guest order access page */
.cottonia-guest-order-page{max-width:1100px;margin:24px auto 40px;padding:28px 16px 40px;}
.cottonia-order-access-shell{background:#fff;border:1px solid var(--bd);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;}
.cottonia-order-access-card{max-width:920px;margin:18px auto 26px;padding:28px 24px;border-radius:24px;}
.cottonia-order-access-card__header{margin:0 0 22px;text-align:center;}
.cottonia-order-access-card__title{margin:0 0 8px;font-size:28px;line-height:1.2;font-weight:800;}
.cottonia-order-access-card__sub{margin:0;color:var(--muted);font-size:14px;line-height:1.6;}
body .cottonia-order-access-card .woocommerce-customer-details,
body .cottonia-order-access-card .woocommerce-order-details{margin-top:20px;}
body .cottonia-order-access-card .woocommerce-columns--addresses,
body .cottonia-order-access-card .woocommerce-order-details .shop_table{border-radius:18px;overflow:hidden;}
body .cottonia-order-access-card .woocommerce-order-details .shop_table th,
body .cottonia-order-access-card .woocommerce-order-details .shop_table td{padding:14px 16px;}
body .cottonia-order-access-card .woocommerce-customer-details address{border-radius:18px;padding:16px 18px;}
.cottonia-order-access-callout{margin-top:22px;border:1px solid rgba(15,23,42,.08);background:rgba(15,23,42,.03);border-radius:18px;padding:16px 18px;display:grid;gap:12px;}
.cottonia-order-access-callout__text{text-align:center;font-size:13px;line-height:1.6;color:rgba(0,0,0,.78);}
.cottonia-order-access-callout__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
@media (max-width: 640px){
.cottonia-order-access-card{padding:20px 16px;}
.cottonia-order-access-card__title{font-size:24px;}
}
/* Mobile My Account: keep last cards away from footer */
@media (max-width: 768px){
body.woocommerce-account .cottonia-aui-wrap{
padding-bottom: 20px !important;
}
body.woocommerce-account .cottonia-aui-grid,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content > :last-child,
body.woocommerce-account .cottonia-aui-grid > main > :last-child,
body.woocommerce-account .cottonia-aui-grid > aside > :last-child{
margin-bottom: 16px !important;
}
}
.cottonia-order-access-card__badge{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 10px;padding:6px 12px;border-radius:999px;background:rgba(15,23,42,.06);font-size:12px;font-weight:800;color:rgba(15,23,42,.78);}
.cottonia-order-access-callout__sub{text-align:center;font-size:13px;line-height:1.65;color:rgba(0,0,0,.66);margin-top:-4px;}
.cottonia-order-access-callout [data-cottonia-claim-order-alert]{margin-top:2px;}
/* Thank you / order details: keep product name and quantity inline */
body.woocommerce-order-received .woocommerce-order-details .shop_table td.product-name a,
body.woocommerce-order-received .woocommerce-order-details .shop_table td.product-name .product-quantity,
body.woocommerce-view-order .woocommerce-order-details .shop_table td.product-name a,
body.woocommerce-view-order .woocommerce-order-details .shop_table td.product-name .product-quantity{display:inline !important;vertical-align:middle;}
body.woocommerce-order-received .woocommerce-order-details .shop_table td.product-name .product-quantity,
body.woocommerce-view-order .woocommerce-order-details .shop_table td.product-name .product-quantity{margin-inline-start:6px;white-space:nowrap;}
body.woocommerce-order-received .woocommerce-order-details .shop_table td.product-name br,
body.woocommerce-view-order .woocommerce-order-details .shop_table td.product-name br{display:none !important;}
/* Native WooCommerce lost/reset password form: match Cottonia auth card without changing reset logic */
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword,
body.woocommerce-account .woocommerce form.lost_reset_password {
max-width: 620px;
margin: 26px auto 34px !important;
padding: 22px !important;
background: #fff;
border: 1px solid var(--bd);
border-radius: var(--r);
box-shadow: var(--shadow);
}
body.woocommerce-account .woocommerce .lost_reset_password > p:first-child,
body.woocommerce-account .woocommerce .woocommerce-ResetPassword > p:first-child {
color: var(--muted);
margin-bottom: 14px;
}
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row,
body.woocommerce-account .woocommerce form.lost_reset_password .form-row {
margin-bottom: 12px;
}
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword label,
body.woocommerce-account .woocommerce form.lost_reset_password label {
display: block;
margin-bottom: 6px;
font-weight: 700;
}
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .input-text,
body.woocommerce-account .woocommerce form.lost_reset_password .input-text {
width: 100%;
min-height: 46px;
padding: 10px 14px;
border: 1px solid var(--bd);
border-radius: 12px;
background: #fff;
}
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword button.button,
body.woocommerce-account .woocommerce form.lost_reset_password button.button,
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .woocommerce-Button,
body.woocommerce-account .woocommerce form.lost_reset_password .woocommerce-Button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 18px;
border-radius: 12px;
border: 1px solid transparent;
background: #111827;
color: #fff !important;
font-weight: 700;
box-shadow: none;
}
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword button.button:hover,
body.woocommerce-account .woocommerce form.lost_reset_password button.button:hover,
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .woocommerce-Button:hover,
body.woocommerce-account .woocommerce form.lost_reset_password .woocommerce-Button:hover {
background: #111827;
color: #fff !important;
opacity: .94;
}
body.woocommerce-account .woocommerce .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce > .woocommerce-message,
body.woocommerce-account .woocommerce > .woocommerce-error,
body.woocommerce-account .woocommerce > .woocommerce-info {
max-width: 620px;
margin-left: auto;
margin-right: auto;
border-radius: 14px;
}
/* Native WooCommerce reset password form styled like Cottonia card */
body.woocommerce-account .woocommerce-lost-password .woocommerce,
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword {
max-width: 760px;
margin-inline: auto;
}
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword {
background: #fff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 24px;
box-shadow: 0 10px 30px rgba(15,23,42,.06);
padding: 24px;
}
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row-first,
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .form-row-last {
width: 100%;
float: none;
margin-right: 0;
}
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword .clear {
display:none;
}
@media (max-width: 767px) {
body.woocommerce-account .woocommerce form.woocommerce-ResetPassword {
padding: 18px;
border-radius: 20px;
}
}
/* Native WooCommerce reset password page styled to match Cottonia card */
body.woocommerce-account .woocommerce-ResetPassword.lost_reset_password,
body.woocommerce-account form.woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-form.woocommerce-ResetPassword {
max-width: 560px;
margin: 24px auto 40px;
padding: 24px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
body.woocommerce-account .woocommerce-ResetPassword input.input-text {
min-height: 44px;
border-radius: 12px;
}
body.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button.button {
background: #111827;
color: #fff;
border-radius: 10px;
min-height: 42px;
line-height: 1;
padding: 10px 18px;
}