/* ============================================================ ORDERA CRO — Zajednički CSS za sve CRO stranice ============================================================ Koristi se na: index.php, ketering.php, za-kompanije.php, hrane-za-radnike.php, cesto-postavljena-pitanja.php Aktiviranje: (preko inline script) Prebija: style-ordera.css gdje god nedostaje kontrast/styling ============================================================ */ /* ===== HERO — zajednički osnovni stil ===== */ .hero_conversion { padding: 60px 0 40px; background: linear-gradient(135deg, #fff 0%, #fafbfc 100%); } .hero_conversion h1.banner_title { font-size: 2.6rem; line-height: 1.2; font-weight: 800; color: #1a1a2e; margin-bottom: 20px; } .hero_conversion h1 .highlight { color: #fb6d3b; } .hero_conversion .banner_para { font-size: 1.15rem; line-height: 1.6; color: #4a4a5e; margin-bottom: 30px; } .hero_eyebrow { display: inline-block; background: #fef0e8; color: #fb6d3b; padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 16px; text-transform: uppercase; } /* ===== CTA DUGMAD ===== */ .cta_primary { background: #fb6d3b; color: #fff !important; padding: 16px 32px; border-radius: 50px; font-weight: 700; font-size: 1.05rem; display: inline-block; text-decoration: none; box-shadow: 0 8px 20px rgba(251,109,59,0.35); transition: all 0.25s ease; border: none; cursor: pointer; } .cta_primary:hover { background: #e85a25; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(251,109,59,0.45); color: #fff !important; text-decoration: none; } .cta_secondary { color: #1a1a2e !important; padding: 16px 24px; font-weight: 600; display: inline-block; text-decoration: underline; margin-left: 12px; } .cta_white { background: #fff; color: #fb6d3b !important; padding: 18px 38px; border-radius: 50px; font-weight: 800; font-size: 1.15rem; display: inline-block; text-decoration: none; box-shadow: 0 10px 24px rgba(0,0,0,0.2); transition: all 0.25s ease; } .cta_white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.28); color: #e85a25 !important; text-decoration: none; } .cta_white_outline { background: transparent; color: #fff !important; padding: 16px 30px; border-radius: 50px; font-weight: 600; font-size: 1rem; border: 2px solid rgba(255,255,255,0.5); display: inline-block; text-decoration: none; transition: all 0.25s ease; margin-left: 12px; } .cta_white_outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff !important; text-decoration: none; } /* ===== TRUST SIGNAL ===== */ .trust_signal { margin-top: 18px; font-size: 0.92rem; color: #6c757d; line-height: 1.8; } .trust_signal i { color: #28a745; font-size: 1.1rem; margin-right: 4px; vertical-align: middle; } .trust_signal span { display: inline-block; } /* ===== SECTION TITLES ===== */ .cro_sec_title { font-size: 2.1rem; font-weight: 800; text-align: center; margin-bottom: 14px; color: #1a1a2e; } .cro_sec_subtitle { text-align: center; color: #6c757d; font-size: 1.1rem; margin-bottom: 50px; max-width: 720px; margin-left: auto; margin-right: auto; } /* ===== PAIN sekcija (zajednička između stranica) ===== */ .pain_section { padding: 80px 0 60px; background: #fff; } .pain_card { background: #fff; border-left: 4px solid #fb6d3b; padding: 28px 24px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); height: 100%; transition: transform 0.2s ease; } .pain_card:hover { transform: translateY(-4px); } .pain_card .pain_icon { font-size: 2.4rem; margin-bottom: 14px; } .pain_card h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: #1a1a2e; } .pain_card p { color: #555; font-size: 1rem; line-height: 1.55; margin: 0; } /* ===== SOLUTION 3 koraka ===== */ .solution_section { padding: 80px 0; background: #fafbfc; } .step_card { text-align: center; padding: 20px; } .step_image_wrap { margin-bottom: 24px; } .step_image_wrap img { max-width: 100%; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .step_number { width: 56px; height: 56px; line-height: 56px; background: #fb6d3b; color: #fff; border-radius: 50%; font-size: 1.5rem; font-weight: 800; margin: 0 auto 16px; box-shadow: 0 6px 16px rgba(251,109,59,0.3); } .step_card h4 { font-size: 1.25rem; font-weight: 800; margin-bottom: 12px; color: #1a1a2e; } .step_card p { color: #555; line-height: 1.55; font-size: 0.98rem; } /* ===== BENEFITS — 2 sa slikama (alternating) ===== */ .benefits_section { padding: 90px 0; background: #fafbfc; } .benefit_row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 70px; } .benefit_row:last-child { margin-bottom: 0; } .benefit_row.reverse { direction: rtl; } .benefit_row.reverse > * { direction: ltr; } .benefit_image img { width: 100%; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.1); } .benefit_content h3 { font-size: 1.7rem; font-weight: 800; color: #1a1a2e; margin-bottom: 16px; line-height: 1.25; } .benefit_content p { color: #555; font-size: 1.05rem; line-height: 1.6; margin-bottom: 16px; } .benefit_list { list-style: none; padding: 0; margin: 20px 0 0 0; } .benefit_list li { padding: 8px 0 8px 32px; position: relative; color: #1a1a2e; font-size: 1rem; line-height: 1.5; } .benefit_list li::before { content: '✓'; position: absolute; left: 0; top: 8px; width: 22px; height: 22px; background: #28a745; color: #fff; border-radius: 50%; text-align: center; line-height: 22px; font-size: 0.85rem; font-weight: 800; } /* ===== MODULI grid ===== */ .modules_section { padding: 80px 0; background: #fff; } .modules_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .module_card { background: #fafbfc; padding: 26px 22px; border-radius: 14px; transition: all 0.3s ease; border: 2px solid transparent; position: relative; } .module_card:hover { background: #fff; border-color: #fb6d3b; transform: translateY(-4px); box-shadow: 0 14px 32px rgba(251,109,59,0.12); } .module_card.highlight { background: linear-gradient(135deg, #fff5ef 0%, #fff 100%); border-color: #ffd9c0; } .module_badge { position: absolute; top: 12px; right: 12px; background: #fb6d3b; color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .module_card .module_icon { font-size: 2.2rem; margin-bottom: 14px; display: inline-block; } .module_card h4 { font-size: 1.1rem; font-weight: 800; color: #1a1a2e; margin-bottom: 10px; } .module_card p { color: #555; font-size: 0.93rem; line-height: 1.55; margin: 0; } .modules_note { text-align: center; color: #6c757d; margin-top: 30px; font-size: 0.98rem; line-height: 1.6; max-width: 800px; margin-left: auto; margin-right: auto; } /* ===== NETWORK — mreža partnera (kitchen chips) ===== */ .network_section { padding: 90px 0; background: linear-gradient(135deg, #fff5ef 0%, #ffeed8 100%); position: relative; overflow: hidden; } .network_section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(251,109,59,0.12) 0%, rgba(251,109,59,0) 70%); pointer-events: none; z-index: 0; } .network_section > .container { position: relative; z-index: 1; } .network_section .hero_eyebrow { display: inline-block; background: #fff; color: #fb6d3b; } .network_kitchen_grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; max-width: 720px; margin-left: auto; margin-right: auto; } .kitchen_chip { background: #fff; border: 2px solid #fb6d3b; color: #1a1a2e; padding: 8px 16px; border-radius: 24px; font-size: 0.95rem; font-weight: 600; box-shadow: 0 4px 12px rgba(251,109,59,0.15); transition: all 0.2s ease; cursor: default; } .kitchen_chip:hover { background: #fb6d3b; color: #fff; transform: translateY(-2px); } /* ===== SERVICE — "Ordera nije samo aplikacija" ===== */ .service_section { padding: 80px 0; background: #fff; } /* ===== PRICING — Pay-per-meal ===== */ .pricing_section { padding: 70px 0; background: linear-gradient(135deg, #fafbfc 0%, #f0f3f8 100%); } .pricing_card { max-width: 820px; margin: 0 auto; background: linear-gradient(135deg, #1a1a2e 0%, #2c2c4a 100%); color: #fff; border-radius: 24px; padding: 50px 40px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(26,26,46,0.3); } .pricing_card::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(251,109,59,0.25) 0%, rgba(251,109,59,0) 70%); pointer-events: none; } .pricing_card::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(251,109,59,0.15) 0%, rgba(251,109,59,0) 70%); pointer-events: none; } .pricing_card > * { position: relative; z-index: 1; } .pricing_eyebrow_pill { display: inline-block; background: #fb6d3b; color: #fff; padding: 6px 18px; border-radius: 24px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 20px; } .pricing_card h2 { color: #fff; font-size: 2.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; } .pricing_card .pricing_subtitle { color: rgba(255,255,255,0.88); font-size: 1.1rem; line-height: 1.6; margin-bottom: 28px; max-width: 640px; margin-left: auto; margin-right: auto; } .pricing_flex_note { display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.95); padding: 14px 24px; border-radius: 12px; font-size: 0.98rem; line-height: 1.5; max-width: 600px; } /* ===== FAQ — accordion ===== */ .faq_section { padding: 80px 0; background: #fafbfc; } .faq_accordion { max-width: 820px; margin: 0 auto; } .faq_item { background: #fff; border-radius: 12px; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; transition: box-shadow 0.25s ease; } .faq_item:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .faq_item summary { padding: 20px 24px; cursor: pointer; font-weight: 700; color: #1a1a2e; font-size: 1.05rem; list-style: none; position: relative; padding-right: 50px; user-select: none; } .faq_item summary::-webkit-details-marker { display: none; } .faq_item summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: #fef0e8; color: #fb6d3b; border-radius: 50%; text-align: center; line-height: 28px; font-weight: 800; font-size: 1.3rem; transition: all 0.25s ease; } .faq_item[open] summary::after { content: '−'; background: #fb6d3b; color: #fff; } .faq_item[open] summary { color: #fb6d3b; } .faq_answer { padding: 0 24px 22px; color: #555; line-height: 1.6; font-size: 0.98rem; } .faq_more_link { text-align: center; margin-top: 28px; } .faq_more_link a { color: #fb6d3b; font-weight: 700; text-decoration: none; font-size: 1.02rem; } .faq_more_link a:hover { color: #e85a25; text-decoration: underline; } /* ===== FINAL CTA ===== */ .final_cta_section { padding: 90px 0; background: linear-gradient(135deg, #fb6d3b 0%, #e85a25 100%); color: #fff; text-align: center; } .final_cta_section h2 { color: #fff; font-size: 2.3rem; font-weight: 800; margin-bottom: 18px; } .final_cta_section p { color: rgba(255,255,255,0.95); font-size: 1.15rem; max-width: 680px; margin: 0 auto 32px; line-height: 1.6; } /* ===== STICKY MOBILE CTA ===== */ .sticky_mobile_cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fb6d3b; color: #fff !important; padding: 14px; text-align: center; font-weight: 700; text-decoration: none; z-index: 9999; box-shadow: 0 -4px 16px rgba(0,0,0,0.15); } .sticky_mobile_cta:hover { color: #fff !important; text-decoration: none; } /* ===== RESPONSIVE — zajedničke media queries ===== */ @media (max-width: 1199px) { .modules_grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .benefit_row { grid-template-columns: 1fr; gap: 30px; margin-bottom: 50px; } .benefit_row.reverse { direction: ltr; } } @media (max-width: 768px) { .sticky_mobile_cta { display: block; } body { padding-bottom: 60px; } .hero_conversion h1.banner_title { font-size: 1.9rem; } .hero_conversion { padding: 30px 0; text-align: center; } .cta_secondary { display: block; margin: 14px 0 0 0; } .final_cta_section h2 { font-size: 1.7rem; } .cro_sec_title { font-size: 1.7rem; } .modules_grid { grid-template-columns: 1fr; } .cta_white_outline { display: block; margin: 14px auto 0; } .benefit_content h3 { font-size: 1.4rem; } .network_section { padding: 60px 0; } .kitchen_chip { font-size: 0.85rem; padding: 6px 12px; } .pricing_card { padding: 36px 24px; } .pricing_card h2 { font-size: 1.6rem; } } /* ============================================================ CSS OVERRIDE — prebijanje style-ordera.css Aktivira se preko body.cro_page klase (dodaje JS skript) ============================================================ */ /* ===== SMOOTH SCROLL za #anchor linkove ===== */ html { scroll-behavior: smooth; } /* ===== HEADER FIX — maksimalna specifičnost (body + header + sva stanja) ===== */ body.cro_page header.oppi_header, body.cro_page header.oppi_header.oppi_header_transparent, body.cro_page header.oppi_header.oppi_food_header, body.cro_page header.oppi_header.fixedMenu, body.cro_page .oppi_header, body.cro_page .oppi_header.oppi_header_transparent, body.cro_page .oppi_header.oppi_food_header, body.cro_page .oppi_header.fixedMenu { background: #fff !important; background-color: #fff !important; background-image: none !important; box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06) !important; padding: 15px 0 !important; } /* Nav linkovi — maksimalna specifičnost */ body.cro_page .oppi_header .header_nav .oppi_header_menu ul li.nav-item a.nav-link, body.cro_page .oppi_header.oppi_header_transparent .header_nav .oppi_header_menu ul li.nav-item a.nav-link, body.cro_page .oppi_header.oppi_food_header .header_nav .oppi_header_menu ul li.nav-item a.nav-link, body.cro_page .oppi_header.fixedMenu .header_nav .oppi_header_menu ul li.nav-item a.nav-link { color: #4d446b !important; opacity: 1 !important; } /* Hover na nav-link — maksimalna specifičnost */ body.cro_page .oppi_header .header_nav .oppi_header_menu ul li.nav-item a.nav-link:hover, body.cro_page .oppi_header.oppi_header_transparent .header_nav .oppi_header_menu ul li.nav-item a.nav-link:hover, body.cro_page .oppi_header.oppi_food_header .header_nav .oppi_header_menu ul li.nav-item a.nav-link:hover, body.cro_page .oppi_header.fixedMenu .header_nav .oppi_header_menu ul li.nav-item a.nav-link:hover { color: #fb6d3b !important; } body.cro_page .oppi_header .header_nav .oppi_header_menu ul li.nav-item a.nav-link::before { background: #fb6d3b !important; } /* "Закажи презентацију" dugme */ body.cro_page .oppi_header .header_nav .oppi_header_menu .oppi_try_for_free, body.cro_page .oppi_header.fixedMenu .header_nav .oppi_header_menu .oppi_try_for_free { color: #fff !important; background: #fb6d3b !important; border-color: #fb6d3b !important; } body.cro_page .oppi_header .header_nav .oppi_header_menu .oppi_try_for_free:hover { color: #fff !important; background: #e85a25 !important; border-color: #e85a25 !important; } /* Hamburger meni (mobile) */ body.cro_page .oppi_header .header_nav .oppi_hamburger .bar_icon .bar { background: #fb6d3b !important; } /* Logo — forsiramo normalan (ne bijel) na svim stanjima */ body.cro_page .oppi_header .header_nav .logo img, body.cro_page .oppi_header.fixedMenu .header_nav .logo img { filter: brightness(1) !important; } /* CRITICAL FIX — .strana class prebijanje */ body.strana.cro_page .oppi_header .header_nav .logo img { filter: brightness(1) !important; } body.strana.cro_page .oppi_header.oppi_food_header .header_nav .oppi_header_menu ul li.nav-item a.nav-link { color: #4d446b !important; } body.strana.cro_page .oppi_header.oppi_food_header .header_nav .oppi_header_menu ul li.nav-item:hover a.nav-link { color: #fb6d3b !important; } /* ===== HERO — svijetlo narandžasti dijagonalni gradient ===== */ .cro_page section.oppi_banner.hero_conversion, .cro_page section.hero_conversion, .cro_page section.cpp_hero, body.cro_page section.hero_conversion, body.cro_page section.cpp_hero { background: linear-gradient(110deg, #ffffff 0%, #fff5ec 55%, #ffeed8 100%) !important; background-image: linear-gradient(110deg, #ffffff 0%, #fff5ec 55%, #ffeed8 100%) !important; background-color: transparent !important; position: relative; overflow: hidden; padding: 120px 0 80px !important; } .cro_page section.hero_conversion::before, .cro_page section.cpp_hero::before { content: ''; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(251,109,59,0.18) 0%, rgba(251,109,59,0) 70%); pointer-events: none; z-index: 0; } .cro_page section.hero_conversion::after, .cro_page section.cpp_hero::after { content: ''; position: absolute; bottom: -150px; left: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(251,109,59,0.08) 0%, rgba(251,109,59,0) 70%); pointer-events: none; z-index: 0; } .cro_page section.hero_conversion > .container, .cro_page section.cpp_hero > .container { position: relative; z-index: 1; } .cro_page section.hero_conversion .overlay { display: none !important; } /* HERO slika — bez parallax overflow-a, ograničena na svoj kontejner */ .cro_page section.hero_conversion .banner_img_macbook, .cro_page section.hero_conversion .banner_img img, .cro_page section.hero_conversion .oppi_banner_img_content img { max-width: 100% !important; height: auto !important; transform: none !important; position: relative !important; } .cro_page section.hero_conversion .oppi_banner_img_content { position: relative !important; z-index: 1; } /* CPP HERO — tamna slova na svijetlo-narandžastom heru */ .cro_page section.cpp_hero h1 { color: #1a1a2e !important; } .cro_page section.cpp_hero p, .cro_page section.cpp_hero p.lead { color: #4a4a5e !important; } .cro_page section.cpp_hero .hero_eyebrow { color: #fb6d3b !important; background: #fef0e8 !important; } .cro_page section.cpp_hero a { color: #fb6d3b !important; font-weight: 700; } /* Hero text colors — prebij staro .banner_title { color: #fff } */ .cro_page .hero_conversion .banner_title, .cro_page .hero_conversion .oppi_banner_content .banner_title, .cro_page .hero_conversion h1 { color: #1a1a2e !important; } .cro_page .hero_conversion .banner_title .highlight { color: #fb6d3b !important; background: linear-gradient(180deg, transparent 60%, rgba(251,109,59,0.18) 60%) !important; padding: 0 4px; } .cro_page .hero_conversion .banner_para, .cro_page .hero_conversion .oppi_banner_content .banner_para, .cro_page .hero_conversion p { color: #4a4a5e !important; } .cro_page .hero_conversion .hero_eyebrow { color: #fb6d3b !important; background: #fef0e8 !important; } .cro_page .hero_conversion .trust_signal { color: #2d2d4a !important; font-weight: 500; } .cro_page .hero_conversion .trust_signal i { color: #28a745 !important; } .cro_page .hero_conversion .oppi_banner_content { padding-top: 0; } /* Hero CTA — bijeli ring efekat */ .cro_page .hero_conversion .cta_primary { color: #fff !important; background: #fb6d3b !important; box-shadow: 0 12px 28px rgba(251,109,59,0.45), 0 0 0 4px rgba(255,255,255,0.7) !important; font-weight: 800 !important; } .cro_page .hero_conversion .cta_primary:hover { background: #e85a25 !important; box-shadow: 0 16px 32px rgba(251,109,59,0.55), 0 0 0 4px rgba(255,255,255,0.85) !important; transform: translateY(-3px); } .cro_page .hero_conversion .cta_secondary { color: #1a1a2e !important; font-weight: 700 !important; } .cro_page .hero_conversion .cta_secondary:hover { color: #fb6d3b !important; } /* ============================================ SOCIAL SHARING — Inline sekcija i Floating dugme ============================================ */ /* INLINE share sekcija */ .ord_share_inline { margin-top: 24px; padding: 20px 24px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; backdrop-filter: blur(10px); } .ord_share_inline.light { background: linear-gradient(135deg, #fff5ef 0%, #fff 100%); border: 1px solid #ffd9c0; } .ord_share_inline_label { color: rgba(255,255,255,0.9); font-size: 0.92rem; font-weight: 700; margin-bottom: 12px; display: block; text-align: center; } .ord_share_inline.light .ord_share_inline_label { color: #1a1a2e; } .ord_share_buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .ord_share_btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 50px; background: rgba(255,255,255,0.95); color: #1a1a2e !important; font-weight: 600; font-size: 0.92rem; text-decoration: none; border: 1.5px solid transparent; transition: all 0.2s ease; cursor: pointer; } .ord_share_btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.18); text-decoration: none; color: #fb6d3b !important; border-color: #fb6d3b; } .ord_share_inline.light .ord_share_btn { background: #fff; border-color: #ffd9c0; } .ord_share_btn.whatsapp:hover { color: #25D366 !important; border-color: #25D366; } .ord_share_btn.viber:hover { color: #665CAC !important; border-color: #665CAC; } .ord_share_btn.email:hover { color: #555 !important; border-color: #555; } .ord_share_btn.facebook:hover { color: #1877F2 !important; border-color: #1877F2; } .ord_share_btn.linkedin:hover { color: #0A66C2 !important; border-color: #0A66C2; } .ord_share_btn.copy:hover { color: #fb6d3b !important; border-color: #fb6d3b; } .ord_share_btn .share_icon { font-size: 1.1rem; } /* FLOATING share dugme (dolje desno) */ .ord_share_float { position: fixed; bottom: 24px; right: 24px; z-index: 999; } .ord_share_float_btn { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #fb6d3b 0%, #e85a25 100%); color: #fff; border: none; cursor: pointer; font-size: 1.6rem; box-shadow: 0 8px 24px rgba(251,109,59,0.45); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; } .ord_share_float_btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 32px rgba(251,109,59,0.55); } .ord_share_float_menu { position: absolute; bottom: 70px; right: 0; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 18px 40px rgba(0,0,0,0.18); display: none; flex-direction: column; gap: 6px; min-width: 200px; border: 1px solid #eef0f3; } .ord_share_float_menu.open { display: flex; animation: fadeInUp 0.2s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ord_share_float_menu a, .ord_share_float_menu button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; color: #1a1a2e !important; background: transparent; border: none; text-decoration: none; font-size: 0.93rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; text-align: left; width: 100%; } .ord_share_float_menu a:hover, .ord_share_float_menu button:hover { background: #fef0e8; color: #fb6d3b !important; text-decoration: none; } .ord_share_float_menu .share_icon { font-size: 1.15rem; } /* Copy feedback toast */ .ord_share_toast { position: fixed; bottom: 90px; right: 24px; background: #28a745; color: #fff; padding: 12px 22px; border-radius: 24px; font-weight: 700; font-size: 0.93rem; box-shadow: 0 10px 24px rgba(40,167,69,0.35); z-index: 1000; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; pointer-events: none; } .ord_share_toast.show { opacity: 1; transform: translateY(0); } @media (max-width: 768px) { .ord_share_float { bottom: 16px; right: 16px; } .ord_share_float_btn { width: 52px; height: 52px; font-size: 1.4rem; } .ord_share_toast { left: 16px; right: 16px; bottom: 80px; text-align: center; } }