:root {
    --c-indigo: #321450;
    --c-magenta: #d1257a;
    --c-coral: #ff5e7e;
    
    --bg-light: #000000;
    --bg-panel: #ffffff;
    --c-text-main: #1a1a2e;
    --c-muted: #64748b;
    --border-color: rgba(0, 0, 0, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', sans-serif; }
body { background-color: var(--bg-light); color: var(--c-text-main); overflow-x: hidden; }
canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; display: block; }

.background { position: fixed; inset: 0; width: 100vw; height: 100vh; background: #000000; z-index: -3; }
.grid-bg { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size: 2rem 2rem; background-position: center center; z-index: -3; filter: blur(1px); }

#preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--bg-light); z-index: 99999; display: flex; justify-content: center; align-items: center; transition: opacity 0.8s ease-out, visibility 0.8s; }
.loader-wrapper { display: flex; flex-direction: column; align-items: center; gap: 20px; filter: drop-shadow(0 0 15px rgba(209, 37, 122, 0.2)); }
.loading-text { color: var(--c-magenta); font-size: 1.2rem; letter-spacing: 1px; animation: pulse 1.5s infinite; font-weight: bold; }
@keyframes pulse { 0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(209, 37, 122, 0.5); } 50% { opacity: 0.5; text-shadow: none; } }
.loader { scale: 0.75; position: relative; width: 200px; height: 200px; }
.loader svg { position: absolute; top: 0; left: 0; }
.head { translate: 27px -30px; z-index: 3; animation: bob 1s infinite ease-in; }
.bod { translate: 0px 30px; z-index: 3; animation: bob 1s infinite ease-in-out; }
.legr { translate: 75px 135px; z-index: 0; animation: rstep 1s infinite ease-in; animation-delay: 0.45s; }
.legl { translate: 30px 155px; z-index: 3; animation: lstep 1s infinite ease-in; }
@keyframes bob { 0%, 5%, 100% { transform: translateY(0) rotate(3deg); } 25%, 70% { transform: translateY(5px) rotate(0deg); } 50% { transform: translateY(0px) rotate(-3deg); } }
@keyframes lstep { 0%, 100% { transform: translateY(0) rotate(-5deg); } 33% { transform: translateY(-15px) translate(32px) rotate(35deg); } 66% { transform: translateY(0) translate(25px) rotate(-25deg); } }
@keyframes rstep { 0%, 100% { transform: translateY(0) translate(0px) rotate(-5deg); } 33% { transform: translateY(-10px) translate(30px) rotate(35deg); } 66% { transform: translateY(0) translate(20px) rotate(-25deg); } }

.container { max-width: 1100px; margin: 0 auto; padding: 20px 15px; position: relative; z-index: 10; }

.main-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; margin-bottom: 20px; position: relative; }
.main-header h1 { position: absolute; left: 50%; transform: translateX(-50%); color: var(--c-indigo); font-size: 1.8rem; font-weight: bold; letter-spacing: 2px; margin: 0; text-shadow: 0 2px 5px rgba(0,0,0,0.05); }

.login-btn { z-index: 2; cursor: pointer; background: transparent; color: var(--c-magenta); padding: 8px 18px; border-radius: 999px; font-weight: bold; transition: 0.3s; border: 1.5px solid var(--c-magenta); font-size: 0.9rem; }
.login-btn:hover { background: rgba(209, 37, 122, 0.05); transform: translateY(-2px); }

.cart-btn { z-index: 2; cursor: pointer; background: linear-gradient(135deg, var(--c-magenta), var(--c-coral)); color: #fff; padding: 8px 18px; border-radius: 999px; font-weight: bold; transition: 0.3s; border: none; box-shadow: 0 4px 15px rgba(209, 37, 122, 0.3); font-size: 0.9rem; }
.cart-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(209, 37, 122, 0.4); }

.category-tabs-container { margin-bottom: 30px; width: 100%; display: flex; justify-content: center; }
.cat-tabs-wrap { width: 100%; max-width: 550px; display: flex; justify-content: center; position: relative; direction: ltr; }
.cat-tabs-input { display: none; }
.cat-tabs-island { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 999px; padding: 5px; display: flex; width: 100%; justify-content: space-between; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.cat-tabs-btn { flex: 1; color: var(--c-muted); font-size: 0.95rem; font-weight: bold; text-align: center; padding: 10px 0; border-radius: 999px; cursor: pointer; position: relative; z-index: 2; transition: all 0.3s ease; }
.cat-tabs-indicator { position: absolute; top: 5px; left: 5px; width: calc(25% - 2.5px); height: calc(100% - 10px); background: linear-gradient(135deg, var(--c-indigo), var(--c-magenta)); border-radius: 999px; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 10px rgba(209, 37, 122, 0.3); }

input[id="cat_orders"]:checked ~ .cat-tabs-island .cat-tabs-indicator { transform: translateX(0); }
input[id="cat_golden"]:checked ~ .cat-tabs-island .cat-tabs-indicator { transform: translateX(100%); }
input[id="cat_instagram"]:checked ~ .cat-tabs-island .cat-tabs-indicator { transform: translateX(200%); }
input[id="cat_tiktok"]:checked ~ .cat-tabs-island .cat-tabs-indicator { transform: translateX(300%); }

input[id="cat_orders"]:checked ~ .cat-tabs-island label[for="cat_orders"],
input[id="cat_golden"]:checked ~ .cat-tabs-island label[for="cat_golden"],
input[id="cat_instagram"]:checked ~ .cat-tabs-island label[for="cat_instagram"],
input[id="cat_tiktok"]:checked ~ .cat-tabs-island label[for="cat_tiktok"] { color: #fff; }

.services-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 25px; justify-items: center; align-items: start; 
    perspective: 1000px;
}

.grid-flip { animation: flipGrid 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes flipGrid {
    0% { transform: rotateY(90deg) scale(0.95); opacity: 0; }
    100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

.clean-service { width: 100%; max-width: 290px; background: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; gap: 12px; padding: 15px; border-radius: 16px; border: 1px solid var(--border-color); box-shadow: 0 8px 25px rgba(0,0,0,0.04); transition: 0.3s; backdrop-filter: blur(5px); }
.clean-service:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(209, 37, 122, 0.1); border-color: rgba(209, 37, 122, 0.2); }
.clean-service .h3 { font-size: 1.2rem; font-weight: 700; color: var(--c-indigo); text-align: center; margin-bottom: 0px; }

.purchase-badge { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 0.8rem; color: var(--c-muted); background: rgba(209, 37, 122, 0.05); padding: 5px 12px; border-radius: 999px; margin: 0 auto 5px auto; border: 1px solid rgba(209, 37, 122, 0.15); width: fit-content; font-weight: 600; }
.purchase-badge span { color: var(--c-magenta); font-weight: bold; }

.link-input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #e2e8f0; background: #f8fafc; color: var(--c-text-main); text-align: right; outline: none; transition: 0.3s; font-size: 0.95rem; }
.link-input:focus { border-color: var(--c-magenta); box-shadow: 0 0 0 2px rgba(209, 37, 122, 0.1); }
.link-input::placeholder { color: var(--c-muted); }

.di-radio-wrap { width: 100%; display: flex; justify-content: center; position: relative; direction: ltr; }
.di-radio-input { display: none; }
.di-radio-island { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px; display: flex; width: 100%; justify-content: space-between; position: relative; }
.di-radio-btn { flex: 1; color: var(--c-muted); font-size: 13px; font-weight: bold; text-align: center; padding: 10px 0; border-radius: 999px; cursor: pointer; position: relative; z-index: 2; transition: all 0.3s ease; }
.di-radio-indicator { position: absolute; top: 4px; left: 4px; width: calc(33.33% - 5.3px); height: calc(100% - 8px); background: linear-gradient(135deg, var(--c-magenta), var(--c-coral)); border-radius: 999px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(209, 37, 122, 0.3); }
input[id^="q1"]:checked ~ .di-radio-island .di-radio-indicator { transform: translateX(0); }
input[id^="q2"]:checked ~ .di-radio-island .di-radio-indicator { transform: translateX(calc(100% + 4px)); }
input[id^="q3"]:checked ~ .di-radio-island .di-radio-indicator { transform: translateX(calc(200% + 8px)); }
input[id^="q1"]:checked ~ .di-radio-island label:nth-of-type(1), input[id^="q2"]:checked ~ .di-radio-island label:nth-of-type(2), input[id^="q3"]:checked ~ .di-radio-island label:nth-of-type(3) { color: #fff; transform: translateY(-1px); }

.icon-box { padding: 10px; background-color: rgba(209, 37, 122, 0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(209, 37, 122, 0.1); }
.icon-box .span { font-size: 1.1rem; font-weight: bold; color: var(--c-magenta); }

.actions-wrapper { display: flex; gap: 10px; width: 100%; margin-top: 10px; align-items: stretch; height: 45px; }

.custom-btn-wrapper { --color: rgba(209, 37, 122, 0.05); --txt-color: #ffffff; --txt-color-2: #ffffff; --point-size: 8px; --point-color: var(--c-coral); --line-color: rgba(209, 37, 122, 0.3); --line-style: solid; --line-weight: 1px; --anim-speed: 1s; position: relative; display: grid; place-items: center; width: calc(50% - 5px); height: 100%; user-select: none; margin: 0; }
.custom-btn { filter: drop-shadow(0 4px 5px rgba(50, 20, 80, 0.2)); position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: none; width: 100%; height: 100%; }
.txt-box { position: absolute; display: grid; place-items: center; text-wrap: nowrap; inset: 0 0%; overflow: clip; will-change: inset, filter; transition: filter 0.25s ease; animation: frame-half calc(var(--anim-speed) * 0.5) forwards; }
.txt-box::after { content: ""; position: absolute; inset: var(--point-size); background: repeating-linear-gradient(45deg, var(--c-indigo), var(--c-magenta) 15%, var(--c-coral) 20%); mix-blend-mode: screen; background-size: 440%; transition: background-size 0.4s ease-in; filter: blur(1px); z-index: 3; opacity: 0.3; }
.txt { position: absolute; padding: 0.5rem; z-index: 5; font: 700 0.95rem 'Cairo', sans-serif; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.txt:last-child { color: #ffffff !important; opacity: 0; animation: none; font-size: 0.85rem; }
.frame { position: absolute; inset: 0 0%; z-index: 1; border: var(--line-style) var(--line-weight) var(--line-color); background-color: var(--color); transition-delay: calc(var(--anim-speed) * 0.5); border-radius: 10px; box-shadow: inset 0 1px 4px 1px rgba(255, 255, 255, 0.1); animation: frame-half calc(var(--anim-speed) * 0.5) forwards; }
.point { position: absolute; box-sizing: border-box; width: var(--point-size); aspect-ratio: 1; border-radius: 25%; border: solid var(--line-weight) var(--line-color); background-color: var(--point-color); background-image: radial-gradient(circle at 50% 120%, rgba(209, 37, 122, 0.5), var(--c-coral)); }
.point.top { top: calc(var(--point-size) * -0.5); }
.point.bottom { bottom: calc(var(--point-size) * -0.5); }
.point.left { left: calc(var(--point-size) * -0.5); }
.point.right { right: calc(var(--point-size) * -0.5); }

.custom-btn:hover .txt { animation: txt-out calc(var(--anim-speed) * 0.5) forwards; }
.custom-btn:hover .txt:last-child { animation: txt-in calc(var(--anim-speed) * 0.5) forwards; }
.custom-btn:hover .txt-box { animation: frame var(--anim-speed) ease; }
.custom-btn:hover .txt-box::after { background-size: 700%; }
.custom-btn:hover .frame { animation: frame var(--anim-speed) ease; }

@keyframes txt-in { 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes txt-out { 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes frame-half { 0% { inset: 0 50%; border-radius: 999px;} 100% { inset: 0 0%; border-radius: 10px;} }
@keyframes frame { 50% { inset: 0 50%; border-radius: 999px;} }

.pay-btn { display: flex; align-items: center; justify-content: center; background-color: #000; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; color: #ffffff !important; font-size: 1.1rem; font-weight: bold; width: calc(50% - 5px); height: 100%; cursor: pointer; position: relative; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; overflow: hidden; margin: 0; }
.pay-btn:focus { outline: none; }
.pay-btn .icon { display: flex; align-items: center; justify-content: center; margin-left: 5px; width: 22px; height: 22px; }
.pay-btn:hover { background-color: #111; border-color: #fff; }
#fingerprint-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; background: #000; }
.pay-btn.active span { display: none; }
.pay-btn.active #fingerprint-container { display: flex; }
.primary, .secondary { stroke-dasharray: 1000; stroke-dashoffset: 2000; animation: draw 3s ease-in-out forwards; }
.checkmark, .primary_check { animation: showCheckmark 1s ease-in-out forwards; animation-delay: 3s; width: 500px; opacity: 0; }
.pay-btn.active #fingerprint-container .checkmark, .primary_check { opacity: 0; }
@keyframes draw { to { stroke-dashoffset: 0; display: none; } }
@keyframes showCheckmark { to { opacity: 1; } }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(5px); }

.login-modal-box { background: #fff; padding: 25px; width: 95%; max-width: 420px; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); border: 1px solid var(--border-color); }
.login-social-btns { display: flex; flex-direction: row; gap: 10px; margin-top: 10px; width: 100%; justify-content: space-between; }
.login-social-btns .btn { flex: 1; height: 45px; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold; gap: 8px; border: 1px solid #e2e8f0; background-color: #f8fafc; color: var(--c-text-main); cursor: pointer; font-size: 0.9rem; transition: 0.2s; padding: 0 10px; white-space: nowrap; }
.login-social-btns .btn:hover { border-color: var(--c-magenta); background: #fff; }
.inputForm { border: 1.5px solid #e2e8f0; border-radius: 10px; height: 45px; display: flex; align-items: center; padding-left: 10px; background: #f8fafc; transition: 0.3s; margin-top: 5px; }
.inputForm svg { fill: var(--c-muted); margin-right: 10px; }
.inputForm .input { margin-left: 10px; border-radius: 10px; border: none; width: 100%; height: 100%; background: transparent; color: var(--c-text-main); outline: none; font-size: 0.95rem; }
.inputForm:focus-within { border-color: var(--c-magenta); }
.button-submit { margin: 15px 0 10px 0; background: linear-gradient(135deg, var(--c-indigo), var(--c-magenta)); border: none; color: white; font-size: 16px; font-weight: bold; border-radius: 10px; height: 45px; width: 100%; cursor: pointer; transition: 0.3s; }

.center-alert-overlay { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 999999; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.error-alert-box { display: flex; align-items: center; justify-content: space-between; width: 90%; max-width: 320px; min-height: 60px; background-color: #232531; border-radius: 12px; padding: 10px 15px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.1); direction: rtl; }
.alert-content { display: flex; gap: 12px; align-items: center; }
.icon-wrap { color: #d65563; background-color: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); padding: 6px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.text-wrap p { margin: 0; }
.text-wrap .title { color: #ffffff; font-size: 0.9rem; font-weight: bold; }
.text-wrap .desc { color: #6b7280; font-size: 0.75rem; margin-top: 2px; }
.close-alert-btn { color: #4b5563; background: transparent; border: none; padding: 6px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease-linear; display: flex; align-items: center; justify-content: center; }
.close-alert-btn:hover { background-color: rgba(255, 255, 255, 0.1); color: #9ca3af; }

#checkout-modal .master-container { display: grid; grid-template-columns: auto; gap: 5px; max-height: 90vh; overflow-y: auto; }
#checkout-modal .card { width: 400px; background: #FFFFFF; box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); }
#checkout-modal .title { width: 100%; height: 40px; position: relative; display: flex; align-items: center; padding-right: 20px; border-bottom: 1px solid #efeff3; font-weight: 700; font-size: 11px; color: #63656b; }
#checkout-modal .cart { border-radius: 19px 19px 7px 7px; }
#checkout-modal .cart .products { display: flex; flex-direction: column; padding: 10px; }
#checkout-modal .cart .products .product { display: grid; grid-template-columns: 60px 1fr 80px 1fr; gap: 10px; }
#checkout-modal .cart .products .product span { font-size: 13px; font-weight: 600; color: #47484b; margin-bottom: 8px; display: block; }
#checkout-modal .cart .products .product p { font-size: 11px; font-weight: 600; color: #7a7c81; }
#checkout-modal .cart .quantity { height: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; margin: auto; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 7px; filter: drop-shadow(0px 1px 0px #efefef) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); }
#checkout-modal .cart .quantity label { width: 20px; height: 30px; display: flex; align-items: center; justify-content: center; padding-bottom: 2px; font-size: 15px; font-weight: 700; color: #47484b; }
#checkout-modal .cart .quantity button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; outline: none; background-color: transparent; padding-bottom: 2px; }
#checkout-modal .card .small { font-size: 15px; margin: 0 0 auto auto; }
#checkout-modal .coupons { border-radius: 7px; }
#checkout-modal .coupons form { display: grid; grid-template-columns: 1fr 80px; gap: 10px; padding: 10px; }
#checkout-modal .input_field { width: auto; height: 36px; padding: 0 12px; border-radius: 5px; outline: none; border: 1px solid #e5e5e5; filter: drop-shadow(0px 1px 0px #efefef) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5)); transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); }
#checkout-modal .input_field:focus { border: 1px solid transparent; box-shadow: 0px 0px 0px 2px #242424; background-color: transparent; }
#checkout-modal .coupons form button { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px 18px; gap: 10px; width: 100%; height: 36px; background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%); box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5); border-radius: 5px; border: 0; font-weight: 600; font-size: 12px; color: #ffffff; cursor: pointer; }
#checkout-modal .checkout { border-radius: 9px 9px 19px 19px; }
#checkout-modal .checkout .details { display: grid; grid-template-columns: 3fr 1fr; padding: 10px; gap: 5px; }
#checkout-modal .checkout .details span { font-size: 13px; font-weight: 600; }
#checkout-modal .checkout .details span:nth-child(odd) { font-size: 11px; font-weight: 700; color: #707175; margin: auto auto auto 0; }
#checkout-modal .checkout .details span:nth-child(even) { font-size: 13px; font-weight: 600; color: #47484b; margin: auto 0 auto auto; }
#checkout-modal .checkout .checkout--footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 20px; background-color: #efeff3; }
#checkout-modal .price { position: relative; font-size: 22px; color: #2B2B2F; font-weight: 900; }
#checkout-modal .price sup { font-size: 13px; }
#checkout-modal .price sub { width: fit-content; position: absolute; font-size: 11px; color: #5F5D6B; bottom: 5px; display: inline-block; }
#checkout-modal .checkout .checkout-btn { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 150px; height: 36px; background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%); box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5); border-radius: 7px; border: 0; outline: none; color: #ffffff; font-size: 13px; font-weight: 600; transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); cursor: pointer; }

.ticket-card { --width: 250px; --height: 400px; --perforation-size: 12px; --cutouts-adjust: 70px; position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; grid-template-areas: "header" "body" "footer"; width: var(--width); height: var(--height); padding: var(--perforation-size) 0; font-family: "Inter", sans-serif; font-size: 1rem; user-select: none; overflow: hidden; filter: drop-shadow(0 2px 1px #00000025) drop-shadow(0 4px 3px #00000025) drop-shadow(0 10px 9px #00000025) drop-shadow(0 20px 20px #00000025) drop-shadow(0 40px 40px #00000025); animation: hover-ticket 3s ease infinite; will-change: transform, filter; }
@keyframes hover-ticket { 50% { filter: drop-shadow(0 4px 3px #00000015) drop-shadow(0 6px 6px #00000015) drop-shadow(0 16px 14px #00000015) drop-shadow(0 30px 28px #00000015) drop-shadow(0 60px 60px #00000015); transform: translateY(-7px) scale(1.02); } }
.ticket-card .filter { position: absolute; }
.ticket-card .bg { position: absolute; inset: 0; border-radius: inherit; background-color: #fff; filter: url(#bump); mask: radial-gradient(circle at 50% 0, #fff0 calc(var(--perforation-size) - 5px), #000 calc(var(--perforation-size) - 4px)), radial-gradient(circle at 50% 100%, #fff0 calc(var(--perforation-size) - 5px), #000 calc(var(--perforation-size) - 4px)), radial-gradient(circle 8px at left center, #000 98%, #0000 100%), radial-gradient(circle 8px at right center, #000 98%, #0000 100%), repeating-linear-gradient(90deg, #000 10px, #000 15px, #0000 16px, #0000 24px); mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat, repeat-x; mask-size: calc(var(--perforation-size) * 2) 100%, calc(var(--perforation-size) * 2) 100%, 16px 16px, 16px 16px, 10px 2px; mask-position: calc(0.5 * var(--perforation-size)) top, calc(0.5 * var(--perforation-size)) bottom, left var(--cutouts-adjust), right var(--cutouts-adjust), 0 calc(var(--cutouts-adjust) + 7px); mask-composite: intersect, exclude, add, add; }
.ticket-card .holographic { background-image: linear-gradient(to bottom, #fe58, 90%, #0002), conic-gradient(at 60% 50%, #ccc, #ff6bfe, #00f9f8, #ddd, #0081fd, #eef0bc, #0081fd, #ff6bfe, #0002, #0081fd, #ddd, #01fefb, #ccc); }
.ticket-card .holographic::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 70% 20%, #f0f, #0000), repeating-radial-gradient(circle at 30% 80%, #fff, #f4a 48px, #eeeeee 150px); mix-blend-mode: color-burn; }
.ticket-card .holographic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, #f205, #f00, #0f0, #f205); mix-blend-mode: difference; animation: bg-pos 3s ease-in-out infinite alternate; background-position: 0 0; background-size: 100% 300%; background-repeat: repeat; }
@keyframes bg-pos { to { background-position: 0 500px; } }
.ticket-card .header { position: relative; grid-area: header; margin: 0 8px; text-align: center; z-index: 1; font-family: "Impact", sans-serif; font-size: 2.75rem; letter-spacing: 2px; color: #ffffff9f; text-shadow: 0 0 0 #000; -webkit-text-stroke: #fff 0.5px; mix-blend-mode: difference; }
.ticket-card .body { grid-area: body; margin: 0 1em; padding: 0.5em; font-weight: 200; z-index: 1; color: #000; }
.ticket-card .footer { grid-area: footer; z-index: 1; margin: 0 1em 1em 1em; }
.ticket-card .number { margin-bottom: 0.75rem; text-align: center; border-radius: 999px 0; color: #000; font-weight: 200; }
.ticket-card .number .bold { font-weight: 600; }
.ticket-card .barcode { justify-self: center; width: 0; height: 32px; box-shadow: 0px 0 0 1px #000, 5px 0 0 1px #000, 7px 0 0 1px #000, 11px 0 0 1px #000, 15px 0 0 1px #000, 16px 0 0 1px #000, 22px 0 0 1px #000, 27px 0 0 1px #000, 30px 0 0 1px #000, 35px 0 0 1px #000, 36px 0 0 1px #000, 39px 0 0 1px #000, 43px 0 0 1px #000, 47px 0 0 1px #000, 50px 0 0 1px #000, 55px 0 0 1px #000, 59px 0 0 1px #000, 60px 0 0 1px #000, 64px 0 0 1px #000, 69px 0 0 1px #000, 70px 0 0 1px #000, 74px 0 0 1px #000; transform: translateX(37px); }
.ticket-card .symbol { position: absolute; top: 1.3em; right: 0px; rotate: 185deg; font-size: 1.1em; color: #fff; line-height: 0.5; opacity: 0.2; }
.ticket-card .notes { position: absolute; inset: 0; overflow: hidden; font-size: 5rem; color: #e7e7e7; mix-blend-mode: color-burn; transform: translateY(20%); z-index: 1; }
.ticket-card .notes:nth-child(2) { transform: translateY(40%); }
.ticket-card .notes:nth-child(3) { transform: translateY(60%); }

@media screen and (max-width: 768px) {
    .cat-tabs-btn { padding: 8px 0; font-size: 0.85rem; }
    #checkout-modal .card { width: 95vw; }
}

/* مربع التعليقات المخصصة وعدّاد التعليقات (خدمات تيك توك الجديدة) */
textarea.link-input { resize: vertical; min-height: 96px; font-family: inherit; margin-bottom: 5px; }
.comments-counter { font-size: 0.85rem; color: var(--c-muted); margin-bottom: 5px; text-align: center; font-weight: 600; }