/* =========================================================
   1. Card Grid (Shortcode)
   ========================================================= */
.nfc-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-bottom: 50px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.nfc-design-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.04); text-align: center; border: 1px solid #f4f4f5; transition: transform 0.3s ease, box-shadow 0.3s ease; flex: 1 1 calc(33.333% - 30px); max-width: 340px; min-width: 280px; }
.nfc-design-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.nfc-img-wrap { position: relative; height: 260px; overflow: hidden; background: #ffffff; display: flex; align-items: center; justify-content: center; }
.nfc-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: 15px; right: 15px; background: #0f172a; color: #fff; padding: 5px 12px; font-size: 11px; font-weight: 800; border-radius: 20px; letter-spacing: 0.5px; z-index: 2; }
.nfc-design-card h3 { margin: 15px 0 5px; font-size: 18px; }
.nfc-design-card .price { color: #000; font-weight: bold; margin-bottom: 15px; }
.nfc-select-btn { display: inline-block; background: #000; color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-weight: 600; font-size: 14px; }

/* Custom Card Button */
.nfc-custom-card-container { width: 100%; margin-top: 30px; }
.nfc-custom-card-btn { display: block; background: linear-gradient(135deg, #000 0%, #1a1a1a 100%); color: #fff !important; text-decoration: none !important; padding: 30px; border-radius: 12px; text-align: center; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.nfc-custom-card-btn:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.custom-btn-content i { font-size: 32px; margin-bottom: 10px; display: block; color: #fcd34d; }
.custom-btn-content span { display: block; font-size: 24px; font-weight: 800; text-transform: uppercase; }
.custom-btn-content small { display: block; font-size: 14px; opacity: 0.8; margin-top: 5px; }

/* =========================================================
   2. Checkout Page
   ========================================================= */
.co-wrapper { display: flex; gap: 30px; flex-wrap: nowrap; margin-bottom: 50px; font-family: "Inter", sans-serif; align-items: flex-start; position: relative; }
.co-left { flex: 1.5; min-width: 0; width: 100%; }
.co-right { flex: 1; min-width: 320px; position: -webkit-sticky; position: sticky; top: 40px; align-self: flex-start; height: fit-content; z-index: 10; }
@media (max-width: 900px) { .co-wrapper { flex-direction: column; } .co-right { position: static; width: 100%; min-width: 100%; } }

.co-card { background:#fff; padding:25px; border-radius:12px; border:1px solid #e5e7eb; margin-bottom:20px; box-shadow:0 2px 5px rgba(0,0,0,0.02); }
.co-card h3 { margin-top:0; margin-bottom:20px; font-size:16px; border-bottom:1px solid #f0f0f0; padding-bottom:10px; color:#333; }
.nfc-input { width:100%; padding:12px; border:1px solid #ddd; border-radius:8px; margin-bottom:15px; box-sizing:border-box; background:#f9f9f9; }
.nfc-input:focus { background:#fff; border-color:#000; outline:none; }

.coupon-box { display: flex; gap: 8px; margin-bottom: 15px; }
.coupon-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
.coupon-btn { background: #333; color: #fff; border: none; padding: 0 15px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.discount-row { display: flex; justify-content: space-between; margin-bottom: 10px; color: #e11d48; font-weight: bold; font-size: 14px; }

.order-summary { background:#f8f9fa; border:1px solid #eee; padding:25px; border-radius:12px; }
.pay-btn { width:100%; background:#000; color:#fff; padding:15px; border:none; border-radius:8px; font-size:16px; cursor:pointer; font-weight:bold; margin-top:20px; }
.pay-btn:hover { background:#333; }

/* Custom Card Checkout specifics */
.material-opt { flex: 1; cursor: pointer; border: 2px solid #ddd; padding: 15px; border-radius: 8px; text-align: center; transition: 0.3s; background: #fff; }
.material-opt.active { border-color: #000; background: #f9f9f9; }
.designer-opt { display: flex; align-items: center; gap: 10px; padding: 15px; background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; cursor: pointer; }

/* Image Cropper Modal */
#crop-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center; }
.crop-box { background:#fff; width:600px; padding:20px; border-radius:12px; max-width:90%; position:relative; box-shadow:0 20px 50px rgba(0,0,0,0.3); }
.img-container { max-height:400px; overflow:hidden; margin-bottom:20px; text-align:center; }
.img-container img { max-width:100%; }
.btn-crop { background:#16a34a; color:#fff; padding:10px 20px; border:none; border-radius:6px; cursor:pointer; }
.btn-cancel { background:#dc2626; color:#fff; padding:10px 20px; border:none; border-radius:6px; cursor:pointer; }

/* Builder UI on Checkout */
.nfc-item-row { display:flex; align-items:center; background:#fff; border:1px solid #eee; padding:10px; margin-bottom:8px; border-radius:8px; }
.nfc-item-icon { width:35px; height:35px; background:#f3f4f6; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:15px; font-size:18px; color:#555; }
.nfc-delete-btn { margin-left:auto; color:red; cursor:pointer; }
.nfc-add-btn { width:100%; padding:12px; background:#f0fdf4; border:1px dashed #16a34a; color:#16a34a; border-radius:8px; cursor:pointer; font-weight:600; text-align:center; }
.nfc-add-btn:hover { background:#dcfce7; }

/* Contact Link Modal */
#co-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.co-modal-box { background:#fff; width:400px; padding:20px; border-radius:12px; max-width:90%; position:relative; }
.icon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; }
.icon-item { text-align:center; cursor:pointer; padding:10px; border-radius:8px; } 
.icon-item:hover { background:#f0f0f0; } 
.icon-item i { font-size:24px; margin-bottom:5px; display:block; color:#333; }